[웹 서비스 A-Z][Deployment] #17 Vuejs

지난 시간까지 Web Server 용(jmcunst-depl-ws), Django Server 용(jmcunst-depl-django), DB Server 용(jmcunst-depl-db) 인스턴스를 만들었습니다.

 

이번 시간에는 Vuejs를 어떻게 배포하는지 알아보도록 하겠습니다.

 

일단 Vuejs는 ‘jmcunst-depl-ws’ 인스턴스에 배포할 예정입니다.

Vue 프로젝트의 package.json의 scripts를 보시면 serve와 build가 보일 것입니다.

serve의 경우 컴퓨터의 nodejs 엔진에 내장된 Web Server를 통해 웹 서비스를 합니다.

build 의 경우 node-modules의 소스들을 하나로 합쳐 하나의 정적 웹소스를 만들게 됩니다. 이것이 dist/ 폴더로 만들어지고 dist/를 다른 웹서버를 통해 웹서비스를 할 수 있게 됩니다.

 

Web Server 인스턴스에 접속해서, git을 먼저 설치하겠습니다.

그리고 web_server 저장소를 clone해 오겠습니다.

yum -y install git
git clone <https://github.com/JMcunst/test_portal_web_server.git>

이제 node와 npm을 설치하도록 하겠습니다.

node는 v16으로, npm은 v8으로 설치하겠습니다.

또한, vue 프로젝트 실행을 위한 vue-cli 도 설치해주겠습니다.

'npm run serve' 를 할 때, ‘vue-cli not found’ 이슈가 생긴다면 ‘npm ci’ 명령어를 쳐주세요.

yum install -y epel-release
yum install -y gcc-c++ make
curl -sL <https://rpm.nodesource.com/setup_16.x> | sudo -E bash -
yum install -y nodejs
npm install -g @vue/cli
npm ci
npm run serve

정식 배포는 build를 통해 이루어지지만 테스트 용으로 접속을 해보겠습니다.

8081 포트의 허용을 해줘야 하는데요,

AWS Console EC2로 돌아가서 ‘jmcunst-depl-ws’를 클릭 보안 탭으로 갑니다. 그리고 보안 그룹(jmcunst-depl-ws-sg)을 클릭합니다.

인바운드 규칙 탭을 클릭하고 ‘인바운드 규칙 편집’을 클릭합니다.

그리고 Vuejs의 포트를 열어줍니다.

그리고 url에 [Public IP]:8081로 접속하면, 아래와 같은 화면을 볼 수 있습니다.

잘 됩니다!

 

테스트를 통해 웹이 잘 되는 것을 확인 했고, 이제 build를 통해 배포할 차례 입니다.

 

이것은 다음 시간에 Web Server의 한 종류인 ‘Nginx’와 함께 해보도록 하겠습니다.

 

감사합니다.

Additional

Vuejs에서 build를 할때 모드 옵션을 줄 수 있는데요, 이번 배포에서는 production 모드로 배포를 하도록 하겠습니다.

따라서, ‘.env.production’ 파일이 필요합니다.

프로젝트의 최상단 경로에서 파일을 생성해 줍니다.

# vi .env.production
NODE_ENV = 'production'

VUE_APP_BASE_API = '[ALB Endpoint]'

특히 VUE_APP_BASE_API의 값으로 엔드포인트 세팅이 됩니다. VPC 밖에서 Private 서브넷의 인스턴스에 요청을 보내야 하기 때문에, ALB를 사용해서 ALB와 기존의 NAT Gateway를 통해 요청하는 것으로 구성을 해보겠습니다.

 

ALB 세팅은 아래 링크를 참고 부탁드립니다.

https://jmcunst.tistory.com/329