front-end(Nextjs)도 back-end에서 작업했던 것과 마찬가지로 root directory에 Dockerfile을 생성한다.
생성한 Dockerfile 안에는 밑과 같이 작성을 하였다.
# Node.js 이미지로 사용
FROM node:14-alpine as build
# 작업 디렉토리를 /app으로 설정한다
WORKDIR /app
# 컨테이너에 package.json와 package-lock.json 파일을 복사합니다.
COPY package*.json ./
# npm 설치
RUN npm install
COPY . .
# Next.js를 빌드한다
RUN npm run build
# 새로운 단독의 nginx 이미지 생성
FROM nginx
# 오픈할 포트를 적어둔다
EXPOSE 3000
# default.conf을 /etc/nginx/conf.d/ 경로에 있는 default.conf에 복사한다.
COPY ./default.conf /etc/nginx/conf.d/default.conf
# nextjs build한 결과물을 /usr/share/nginx/html에 복사한다.
COPY --from=build app/out /usr/share/nginx/html
server {
listen 3000; // 내부 포트 개방
location / {
root /usr/share/nginx/html; // 위에서 빌드한 파일 위치 지정
index main.html;
try_files $uri $uri/ /main.html;
}
}
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
}
Nextjs CICD
name: Docker
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.14.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: web docker build and push
run: |
docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
docker build -t ${{ secrets.DOCKER_REPO }}/yeh_front .
docker push ${{ secrets.DOCKER_REPO }}/yeh_front
- name: aws ec2 docker image pull
uses: fifsky/ssh-action@master
with:
command: |
docker pull ${{ secrets.DOCKER_REPO }}/yeh_front
host: ${{ secrets.HOST }}
user: ${{ secrets.USERNAME }}
key: ${{ secrets.KEY }}
EC2 서버에 nginx 이미지 pull 받기.
docker-compose.yaml 파일을 작성한다.
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
vi docker-compose.yaml
version: '3'
services:
web:
container_name: web
image: {docker ID}/web
expose:
- 8080
ports:
- 8080:8080
next:
container_name: front
image: {docker ID}/front
expose:
- 3000
nginx:
container_name: nginx
image: nginx:latest
restart: always
volumes:
- ./conf/nginx.conf:/etc/nginx/conf.d/nginx.conf
ports:
- 80:80
- 443:443
depends_on:
- web
- next
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4096;
include /etc/nginx/mime.types;
default_type application/octet-stream;
include /etc/nginx/conf.d/*.conf;
server {
listen 80;
server_name devyeh.com www.devyeh.com;
# redirect https setting
if ($http_x_forwarded_proto != 'https') {
return 301 https://$host$request_uri;
}
location / {
proxy_pass http://front:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 300;
proxy_connect_timeout 300;
proxy_send_timeout 300;
}
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header HOST $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://web:8080;
proxy_redirect off;
}
}
}
docker-compose up -d