Express EC2에 배포해보기(2)

jdm1219·2019년 7월 1일
0

myFirstDeploy

목록 보기
2/2

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

3. 업로드 할 앱 준비


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

express-generator를 설치해 줍니다.

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

  1. vue-cli 생성

vue-cli를 설치해 줍니다.

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

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

image.png

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

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

express또한 실행해줍니다.

http://localhost:8080 에 접속해봅니다.
image.png
servser/routes/users.js의 파일을 수정해줍니다.

잘 연동이 되었는지 http://localhost:8080/users 로 접속해봅니다.
image.png
접속이 되었습니다.
4. vue-cli build
서버실행환경에선 client를 build해 정적인 파일로 만들어주고, 3000포트에서 build된 파일을 실행할 수 있게 해줍니다.
우선 vue-cli 빌드설정을 해줍니다.

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

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

express를 실행시켜 접속이 되는지 확인해줍니다.
image.png
정상적으로 동작합니다!
본인의 github repository에 push해주면 인스턴스에 올릴준비가 다 되었습니다.

4. EC2인스턴스에 올리기

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

git을 설치해줍니다.

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

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

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

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

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

이상!

0개의 댓글