3. Angular + Nginx + Docker Compose

---

1. Angular

1) 프로젝트 디렉터리 생성

mkdir -p ./Angular-Web/Web && \
  cd ./Angular-Web && \
  echo "**/node_modules" >./Web/.dockerignore

2) NVM 설치 (Dev)

# Install NVM manually
export NVM_DIR="$HOME/.nvm" && (
  git clone https://github.com/nvm-sh/nvm.git "$NVM_DIR"
  cd "$NVM_DIR"
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
  ) && \. "$NVM_DIR/nvm.sh"

# Write NVM path into ~/.bashrc
cat >>${HOME}/.bashrc <<EOF

# NVM
export NVM_DIR="\$HOME/.nvm"
# This loads nvm
[ -s "\$NVM_DIR/nvm.sh" ] && \. "\$NVM_DIR/nvm.sh"
# This loads nvm bash_completion
[ -s "\$NVM_DIR/bash_completion" ] && \. "\$NVM_DIR/bash_completion"
EOF

# Source ~/.bashrc
source $HOME/.bashrc

3) Node.js 설치 (Dev)

# Install Node LTS
nvm install --lts && \
  nvm alias default lts/* && \
  nvm use lts/*

4) Angular 설치 및 프로젝트 생성 (Dev)

npm install -g @angular/cli
ng new angular

• 만약 다른 곳에서 개발하는 경우 NVM, Node.js, Angular를 설치할 필요없이 해당 프로젝트를 전체 복사하면 된다.

2. Nginx

1) nginx.conf 파일 작성

cat >./Web/nginx.conf <<EOF
user www-data;
worker_processes 1;
pid /run/nginx.pid;

events {
        worker_connections 4096;
        multi_accept on;
        use epoll;
}

http {
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;

        server {
                listen 80;
                server_name localhost;

                location / {
                        root   /usr/share/nginx/html;
                        index  index.html index.htm;

                        try_files \$uri \$uri/ /index.html?\$args;
                }

                error_page 500 502 503 504 /50x.html;
                location = /50x.html {
                        root /usr/share/nginx/html;
                }
        }

        client_body_timeout 86400;
        send_timeout 86400;
        reset_timedout_connection off;

        proxy_connect_timeout 86400;
        proxy_send_timeout 86400;
        proxy_read_timeout 86400;

        types_hash_max_size 2048;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        gzip on;
}
EOF

2) Dockerfile 파일 작성

cat >./Web/Dockerfile <<EOF
# Get Arg from docker-compose.yml
ARG PROJECT

# Build Angular as base
FROM node:16.15.0-alpine AS base
ARG PROJECT
WORKDIR /app
COPY ./\$PROJECT .
RUN npm install && npm run build

# Build prod(Nginx) from base(Angular)
FROM nginx:latest AS prod
ARG PROJECT
RUN rm -rf /usr/share/nginx/html
COPY --from=base /app/dist/\$PROJECT /usr/share/nginx/html
EOF

3. Docker Compose

1) .env 파일 작성

cat >./.env <<EOF
DRIVER="bridge"
SUBNET="172.18.0.0/16"
GATEWAY="172.18.0.1"

WEB_PROJECT="angular"
WEB_DIR="./Web"
WEB_DOCKERFILE="\${WEB_DIR}/Dockerfile"
WEB_CONFIGFILE="\${WEB_DIR}/nginx.conf"
WEB_IPV4="172.18.0.2"
WEB_HPORT="9999"
WEB_CPORT="80"
EOF

2) docker-compose.yml 파일 작성

cat >./docker-compose.yml <<EOF
version: "3.8"

services:
  web:
    container_name: "web"
    build:
      context: .
      dockerfile: \${WEB_DOCKERFILE}
      target: prod
      args:
        - PROJECT=\${WEB_PROJECT}
    ports:
      - \${WEB_HPORT}:\${WEB_CPORT}
    working_dir: /
    volumes:
      - \${WEB_CONFIGFILE}:/etc/nginx/nginx.conf
    networks:
      net:
        ipv4_address: \${WEB_IPV4}

networks:
  net:
    driver: \${DRIVER}
    ipam:
      config:
        - subnet: \${SUBNET}
          gateway: \${GATEWAY}
EOF

3) Docker Compose 실행

sudo docker-compose -p test up -d

4) <none> 중간 이미지 제거

sudo docker image prune -f

---