Express EC2에 배포해보기(2)

지난 글에선 EC2인스턴스에 연결까지 해보았습니다.

3. 업로드 할 앱 준비

---

1. express-generator 생성
   저는 로컬환경을 express-generator와 vue-cli로 구성했습니다.

$ npm install express-generator -g

express-generator를 설치해 줍니다.

$ express --view=pug server
$ cd server
$ npm i

루트폴더에서 server폴더안에 express-generator를 생성합니다.

2. vue-cli 생성

$ npm install -g @vue/cli

vue-cli를 설치해 줍니다.

$ vue create client

루트폴더에서 client폴더안에 vue-cli를 생성합니다.
생성할때 나오는 옵션은 default값으로 설정해주었습니다.

.
├── server
└── client

현재의 디렉토리 구조입니다.
터미널 탭을 두개를 사용하여 서버,클라이언트쪽으로 이동해줍니다.

$ cd client

$ cd server

3. server와 client연결
   vue-cli는 8080포트를, express-generator는 3000포트를 사용합니다.
   8080포트에서 요구하는 요청을 3000포트로 돌려주어야 합니다.
   클라이언트 폴더 안에 vue.config.js파일을 만들어 줍니다.

module.exports = {
	devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:3000/',
                changeOrigin: true
            }
        }
    }
}

만든 파일안에 설정을 적어줍니다.
vue-cli를 실행합니다.

$ yarn serve 또는
$ npm run serve

express또한 실행해줍니다.

$ npm run start

http://localhost:8080 에 접속해봅니다.

servser/routes/users.js의 파일을 수정해줍니다.

router.get('/', function(req, res, next) {
  	res.send('Hello world');
});

잘 연동이 되었는지 http://localhost:8080/users 로 접속해봅니다.

접속이 되었습니다.
4. vue-cli build
서버실행환경에선 client를 build해 정적인 파일로 만들어주고, 3000포트에서 build된 파일을 실행할 수 있게 해줍니다.
우선 vue-cli 빌드설정을 해줍니다.

    devServer: {
    	proxy: {
        	'/': {
            	target: 'http://인스턴스주소:3000',
                changeOrigin: true
            }
        }
	},
    publicPath: "./",
    outputDir: "../server/public"

아까 만든 vue.config.js파일에서 proxy설정을 본인의 인스턴스주소로 변경해줍니다.
또, server폴더에 public으로 빌드될 수 있게 위와같이 수정해줍니다.

$ yarn build 또는
$ npm run build

로 vue-cli를 build 해줍니다. server폴더에 public 폴더에 build가 된 모습을 볼 수 있습니다.

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── js
│   ├── css
│   ├── img
│   └── index.html
├── routes
│   ├── index.js
│   └── users.js
└── views

express를 실행시켜 접속이 되는지 확인해줍니다.

정상적으로 동작합니다!
본인의 github repository에 push해주면 인스턴스에 올릴준비가 다 되었습니다.

4. EC2인스턴스에 올리기

putty로 본인의 인스턴스에 접속해줍니다.
인스턴스에 node.js를 설치해줍니다.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash
$ . ~/.nvm/nvm.sh
$ nvm install 12.5.0   (2019.07.01기준)

git을 설치해줍니다.

$ yum install git-core
$ apt-get install git

git을 이용하여 자신의 repository를 clone해줍니다.

$ git init
$ git clone [url]
$ cd server
$ npm run start

server폴더로 이동하여 express를 실행해줍니다.
정상적으로 잘 접속됩니다!
하지만 ssh접속을 종료하면 서버도 같이 꺼지게 됩니다.

$ nohup npm run start &

명령어로 ssh접속을 종료해도 서버는 꺼지지 않게 해줍니다.

$ exit

접속을 종료하고 접속을 해봐도 여전히 잘 실행되는걸 확인할수있습니다.
express를 종료하고 싶다면 다시 인스턴스에 접속해

$ ps -ef

로 실행중인 express앱의 pid를 확인하고 kill로 종료해주면 됩니다.

$ kill 3236 <-(pid)

이상!