지난 글에선 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

    image.png

  1. 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 에 접속해봅니다.
    image.png
    servser/routes/users.js의 파일을 수정해줍니다.
    router.get('/', function(req, res, next) {
       res.send('Hello world');
    });
    잘 연동이 되었는지 http://localhost:8080/users 로 접속해봅니다.
    image.png
    접속이 되었습니다.
  2. 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를 실행시켜 접속이 되는지 확인해줍니다.
    image.png
    정상적으로 동작합니다!
    본인의 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)

이상!