Frontend 서버 컨테이너화하기

우리가 Backend 서버를 컨테이너화했듯이 우리도 그것을 프론트엔드 서버에서 수행해 보겠습니다. 맨 앞단에서 nginx 로 클라이언트의 요청을 받고, 그것을 express 앱과 연결할 겁니다. 이미지 파일, JS 파일, CSS 파일들은 nginx가 서빙하도록 하고, 경로에 따라 달라지는 html 파일들은 express가 서빙하도록 처리하겠습니다.

구현의 시작은 역시 server.js 와 같은 레벨에서 Dockerfile 을 만드는 것으로 시작합니다.

FROM node:18-alpine

COPY . /app
WORKDIR /app

RUN npm install

RUN npm ci --only=production

RUN apk update && \
    apk add nginx

RUN chmod +x /app/deploy/entrypoint.sh

ENTRYPOINT [ "/app/deploy/entrypoint.sh" ]

이전에 진행했던 Dockerfile 의 구성 방식을 잘 이해했다면, 어째서 위와 같이 작성되었는지 알기 쉬울 겁니다!

똑같이 frontend/deploy 아래에 2개의 파일을 만들어준 다음,

#!/bin/sh
set -e

# Start Nginx
nginx -c /app/deploy/nginx.conf

# Start NodeJS
node server.js

user root;

events{}

http{
        server {
                listen 80;

                location / {
                    proxy_pass http://localhost:3000;
                }

                location /assets/img/  {
                alias /app/assets/img/;
                }
        }
}

위와 같은 코드들을 작성해 주시면 되겠습니다. express 서버가 3000번을 듣고 있으므로, 80번 포트로 들어오는 요청을 3000번 포트로 프록시한다는 걸 알려주고 있죠?

빌드를 하고,

컨테이너 내의 80번 포트를 80번으로 내보내며 실행하면,

Good! 잘 동작합니다.

그런데 위의 것은 동작하지 않을 겁니다. 그 이유는 현재 자바스크립트 코드에서 API 서버가 localhost:5000 을 가리키고 있기 때문입니다. 예전에 배포해 뒀던 fly.io 백엔드 서버를 가리키도록 수정합시다.

그리고 그걸 우리는 frontend/assets/utils/variables.js 에 정의해 두었었죠?

위와 같은 값으로 바꿔 주시면 되겠습니다!

이후 회원가입을 시도하면, 정상 동작하는 걸 확인할 수 있습니다!

fly.io 에 배포하기

이제, 성공적으로 컨테이너화된 우리의 프론트엔드 애플리케이션을 배포하겠습니다. 이전에 백엔드 서버를 배포했듯이, 몇 가지 명령어만 입력하면 되겠죠? frontend 디렉토리 안에서 flyctl launch 를 입력합니다.

몇 가지 선택을 수행하고 나면, 이후의 진행과정은 아래와 같습니다. 잠시 Would you like to deploy now? 질문에 No 를 답했는데,

우리의 컨테이너 구조상, 80번 포트를 내부적으로도 사용하고 있으므로 internal_port 를 80으로 고쳐 줍니다. (frontend/fly.toml)

flyctl deploy 를 입력하고, dashboard 로 이동한 후, 원래의 주소에 /flastagram/posts 를 입력하면,,!

배포가 잘 된 것을 볼 수 있네요! :)