2.19토

이번 섹션에서는 실제 서버에서 백엔드를 실행하는 모든 단계들을 해볼 것이다.

Heroku를 통해 배포 

node.js 환경에서도 서버가 실행 할 수있도록 

db바꾸기 mongodb가 localhost에서 진행되고있음

파일들을 서버가아닌 아마존에 올려야함

코드를 production 방식으로 배포하고 압축 

 

우리는 nodemon을 이용해서 babelnode를 실행하고있다. 

bablenode는 실제로 서비스 되는 곳이아니라 개발할 때만 사용되는 목적으로 사용

코드를 바꾸지않고 sexy코드를 실행시킨다 하지만 빠르지않아 performance문제가있다. 

initjs를 normal javascript 코드 unsexy 코ㅡㄹ 바꿔야해 -->babel cli 

 

https://babeljs.io/docs/en/babel-cli
npm install --save-dev @babel/core @babel/cli

 

  "scripts": {

    "build:sever":"babel src -d build", //src 모든 폴더를 빌드해서 실행 -d 특정 directory, 빌드한 코드를 어디에 저장할지 directory called build

    "dev:server": "nodemon",

    "dev:assets": "webpack "

  },

//build라는 폴더 생성됨

 

gitignore에 /build 추가 

 

build 내 파일을 보면 호환이 되는 예전 javascript로 이루어져있다. 

babel로 컴파일할 때 pug와관련된 view파일은 컴파일 되지않아서 복사해야함 -->

src를 통채로 build 하고있어서 복사 할 필요 없음 src내에 views파일존재 

//regenerator async,await error --> init.js 상단에

import  "regenerator-runtime";

 

npm run build:server 실행 

npm start --> nodemon이아니고 node로 server가 시작됨 모두 이해해서 

환경변수 .env있는파일 자동으로 읽음 

---서버, 백앤드 빌드함 

 

----프론트엔드 

webpack.config.js

 

mode: 'development' 삭제하고

 

 

package.json

 

  "scripts": {

    "start": "node build/init.js",

    "build:server": "babel src -d build",

    "build:assets": "webpack --mode=production ", //build할 때 프로덕션모드

    "dev:server": "nodemon",

    "dev:assets": "webpack --mode=development"// dev할 때 dev모드

  },

npm run dev:assets

npm run build:assets 각각 실행 문제 없음 

 

assets에 있는 모든 js 파일 한 줄 로 작성되어있음

문제는 builid assets으로 되어있지만 아직도 watch되고 있음

 

development 모드에서만 watch되어야하기 때문에  

webpackconfig.js에서 watch:true 지우고 

 

명령어로 package.json에 

    "build:assets": "webpack --mode=production ", //build 타임으로 끝남

   "dev:assets": "webpack --mode=development --w" //watch명령어 client에서 무언갈 바꾸면 제시작됨 

}

nodemon 없이 모든 브라우저가 이해할 수있고 작동함 이제 

 

 

scripts": {
    "build": "npm run build:server && npm run build:assets", // 아래 코드를 합쳐놓음
    "build:server": "babel src -d build",
    "build:assets": "webpack --mode=production ",

 

client는 프론트엔드 부분입니다. build:server로 백엔드를 빌드하고, build:assets로 프론트엔드(client폴더 내용)를 빌드합니다. 원하시는 답변이 되었으면 좋겠네요.

Heroku에 올려보자 : 실제서버에 뒀을 때 어떻게 에러가 생길지 보기위해 

 

 

heroku 설치 

heroku logs --tail  로그보여줌 //--tail은 실시간으로 

heroku는 push하면 자동으로  depndencies, dev-dependeices, npm build,  npm run 실행 함 

 

2022-02-21T02:21:55.088554+00:00 app[web.1]: Assertion failed: You must provide either mongoUrl|clientPromise|client in options
2022-02-21T02:21:55.090267+00:00 app[web.1]: /app/node_modules/connect-mongo/build/main/lib/MongoStore.js:119
2022-02-21T02:21:55.090268+00:00 app[web.1]: throw new Error('Cannot init client. Please provide correct options');

다음과 같은 에러가나는데 db에 DB_URL(.env 파일에 있는 환경변수가있는  .env 파일을 .gitinore하라고 했기 때문에 git에 저장되어있지 않다. 

mongoose.connect(process.env.DB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
}); //mongoose가 database와 연결 해줌 

 

그러면 .env를 공개로 해서 올리면 되지않느냐? nope 절대로 ! private한 git이라도 절대 올리면 안돼

대신 

 

mongoDBAtlas 계정만들기 MongoDB Atlas
https://www.mongodb.com/atlas/database

MongoDB 생성
1. 새로운 Project 생성
2. Cluster추가 (Create a database)
(Atlas-DEPLOYMENT-Databases에서 Build a Database로 변경)
3. Shared클릭
4. Cloud Provider & Region 선택 (us-east-1)
5. Cluster Tier 선택 (Free)
6. Cluster 생성

Connect to DB
password를 사용자의 암호로 바꿉니다. myFirstDatabase를 연결이 기본적으로 사용할 데이터베이스 이름으로 바꿉니다. 모든 옵션 매개변수가 URL로 인코딩되었는지 확인하십시오.

.env에서 설정한 환경 변수를 heroku에 Config Vars에 추가

 

 

AWS S3에서 버킷 생성
AWS S3(Simple Storage Service)란?
Simple Storage Service의 약자로 파일 서버의 역할을 하는 서비스다.
https://s3.console.aws.amazon.com/s3/home

IAM에서 API Key 생성
여기서는 AWS S3 버킷에 파일을 업로드하기 위한 권한을 가진 API키 생성.
이 API 키를 이용해서 AWS S3 버킷에 접근해서 파일을 업로드함

IAM 리소스 -> 사용자 -> 사용자 추가 ->
액세스 키 – 프로그래밍 방식 액세스
AWS API, CLI, SDK 및 기타 개발 도구에 대해 액세스 키 ID 및 비밀 액세스 키를 활성화합니다.
권한 설정 AmazonS3FullAccess
https://console.aws.amazon.com/iamv2/home?#/home

Multer S3 (AWS S3용 스트리밍 Multer 스토리지 엔진)
npm i multer-s3
npm i @types/multer-s3 -D (타입스크립트)
https://www.npmjs.com/package/multer-s3

AWS-SDK (JavaScript용 AWS SDK)
npm i aws-sdk
https://www.npmjs.com/package/aws-sdk

AWS S3 설정
```
const s3 = new AWS.S3({
credentials: {
accessKeyId: process.env.AWS_ACCESS_KEY,
secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
},
});
```

multer(opts) (Multer옵션)
dest
업로드된 파일의 디렉터리입니다. storage가 설정되지 않고 dest가 설정된 경우 Multer는 임의의 파일 이름으로 dest경로에 파일을 저장하도록 구성된 DiskStorage 인스턴스를 생성합니다.
storage가 설정되어 있으면 dest옵션은 무시됩니다.

storage
Multer를 통해 업로드된 파일 처리를 담당하는 StorageEngine입니다. storage는 dest보다 우선됩니다. (storage설정시 dest는 무시)
https://www.npmjs.com/package/multer

multer

 

 

 IAM -apikey가 있어야 AWS와 node.js 대화가능 
MULTERS3-파일을 우리사이트가아니고 AWS에 업로드 storage 이용
heroku logs --tail
heroku는 기본적으로 npm start를 실행