Docker Compose로 Vue + Laravel + Nginx Proxy 연동

설명

• AWS EC2에서 cent os7에서 docker compose로 proxy를 활용하여 포트에 맞는 서브도메인을 설정하여 vue, laravel 웹서버를 올립니다.

도메인 구매

• 가비아에서 도메인을 구매.
  참고 : https://yomun.tistory.com/103

AWS Route 53

• 호스팅 설정 링크에 들어갑니다.
  https://console.aws.amazon.com/route53

• DNS 관리항목을 선택합니다.

• 호스팅 영역 생성 --> 도메인 이름 --> 생성을 선택합니다.
• ※ 아래와 같은 화면이 안나오면 이전콘솔 사용하기 버튼을 선택하면됩니다.
  
• 레코드 선택을 선택해 Vue,Laravel로 향할 서브도메인을 입력하고 값에 EC2 퍼블릭 IP를 입력합니다.
  
• 아래와 같이 목록을 추가합니다.
  
  

가비아 네임서버 설정

• 가비아로 접속합니다.
  https://domain.gabia.com/

• My가비아 선택
  
  
  
• 화살표 선택
  
  
  
• 관리툴 선택
  
  
• 네임서버 설정 선택
  
  
• AWS Route 53에서 NS값 4개를 입력합니다(※가비아에서 네임서버를 입력할때 끝에 .은 지워주세요)
  
  

예제파일

https://github.com/seongs156/docker_vue_laravel_proxy

프로젝트 폴더생성

생성
$ mkdir /home/docker_vue_laravel_proxy

Nginx Proxy

폴더생성
$ cd /home/docker_vue_laravel_proxy
$ mkdir proxy
$ cd proxy
$ mkdir log html certs vhost.d config

nginx proxy network 추가
$ docker pull nginxproxy/nginx-proxy:alpine
$ docker network create nginx-proxy

compose 파일생성
$ vi /home/docker_vue_laravel_proxy/proxy/docker-compose.yml

# docker-compose.yml

version: '2'
services:
  nginx-proxy:
    image: nginxproxy/nginx-proxy
    container_name: nginx-proxy
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - /var/log/docker/nginx/config:/etc/nginx/conf.d
    networks:
      - nginx-proxy
networks:
  nginx-proxy:
    name: nginx-proxy

compose 파일 실행
$ cd /home/docker_vue_laravel_proxy/proxy
$ docker-compose up -d --build

Vue

Vue 설치
$ sudo yum -y update
$ curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash -
$ yum install -y nodejs
$ npm install -g @vue/cli@4.x.x
$ npm i -g @vue/cli-init
$ cd /home/docker_vue_laravel_proxy
$ vue init webpack vue

• 옵션들은 취향에 맞게 선택해 주시면됩니다.
  

nginx 파일생성
$ mkdir /home/docker_vue_laravel_proxy/vue/nginx
$ vi /home/docker_vue_laravel_proxy/vue/nginx/default.conf

# default.conf

server {
    listen 8070;
    server_name localhost _;
    index index.html;
    root /usr/share/nginx/html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        alias /usr/share/nginx/html/;
        try_files $uri $uri/ /index.html;
    }
}

docker compose 파일생성
$ vi /home/docker_vue_laravel_proxy/vue/docker-compose.yml

# docker-compose.yml

version: '3.7'
services:
  app:
    build:
      context: ./
      dockerfile: Dockerfile
    container_name: vue-app
    restart: unless-stopped
    ports:
      - "8070:8070"
    expose:
      - "8070"
    environment:
      - VIRTUAL_HOST=vue.user156.com
      - VIRTUAL_PORT=8070

networks:
  default:
    external:
      name: nginx-proxy

Dockerfile 파일생성
$ vi /home/docker_vue_laravel_proxy/vue/Dockerfile

# Dockerfile

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./

RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable-alpine as production-stage
#RUN rm /etc/nginx/conf.d/default.conf
COPY  ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage ./app/dist /usr/share/nginx/html
EXPOSE 8070
CMD ["nginx", "-g", "daemon off;"]

EC2 포트 허용

• Laravel, Vue, http, https포트를 허용합니다. 8070,8000,80,443
  
  
• 인바운드 규칙 편집을 클릭합니다.
  
  
• 허용할 포트를 추가합니다.
  
  

Vue docker compose 빌드
$ cd /home/docker_vue_laravel_proxy/vue
$ docker-compose up -d --build

확인

Laravel

Laravel 설치
$ yum install -y git
$ cd /home/docker_vue_laravel_proxy
$ git clone https://github.com/laravel/laravel.git
$ cd /home/docker_vue_laravel_proxy/laravel
$ cp /home/docker_vue_laravel_proxy/laravel/.env.example /home/docker_vue_laravel_proxy/laravel/.env
$ chmod 775 -R /home/docker_vue_laravel_proxy/laravel
$ vi /home/docker_vue_laravel_proxy/laravel/.env

# .env

APP_URL=http://localhost:8000

nginx 파일생성
$ mkdir -p /home/docker_vue_laravel_proxy/laravel/docker-compose/nginx
$ vi /home/docker_vue_laravel_proxy/laravel/docker-compose/nginx/default.conf

# default.conf

server {
    listen 8000;
    server_name localhost _;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/public;
    client_max_body_size 300M;

    location ~ \.php$ {
        client_max_body_size 300M;
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    location / {
        client_max_body_size 300M;
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
}

docker compose 파일생성
$ vi /home/docker_vue_laravel_proxy/laravel/docker-compose.yml

# docker-compose.yml

version: "3.7"
services:
  app:
    build:
      args:
        user: laravel_user
        uid: 1000
      context: ./
      dockerfile: Dockerfile
    image: laravel
    container_name: laravel-app
    restart: unless-stopped
    working_dir: /var/www/
    volumes:
      - ./:/var/www

  nginx:
    image: nginx:stable-alpine
    container_name: laravel-nginx
    restart: unless-stopped
    expose:
      - 8000
    volumes:
      - ./:/var/www
      - ./docker-compose/nginx:/etc/nginx/conf.d/
    environment:
      - VIRTUAL_HOST=laravel.user156.com
      - VIRTUAL_PORT=8000

networks:
  default:
    external:
      name: nginx-proxy

Dockerfile 파일생성
$ vi /home/docker_vue_laravel_proxy/laravel/Dockerfile

# Dockerfile

FROM php:7.4-fpm

# Arguments defined in docker-compose.yml
ARG user
ARG uid

# Install system depende

RUN apt-get update && apt-get install -y \
    git \
    curl \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    zip \
    unzip

# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*

# Install PHP extensions
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd

# Get latest Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# Create system user to run Composer and Artisan Commands
RUN useradd -G www-data,root -u $uid -d /home/$user $user
RUN mkdir -p /home/$user/.composer && \
    chown -R $user:$user /home/$user

# Set working directory
EXPOSE 9000
WORKDIR /var/www

USER $user

Laravel docker compose 빌드
$ chmod 775 -R /home/docker_vue_laravel_proxy/laravel
$ cd /home/docker_vue_laravel_proxy/laravel
$ docker-compose up -d --build
$ docker exec -it laravel-app /bin/bash
$ composer install
$ php artisan key:generate