前端項目部署到 Docker

環境

• docker
• docker-compose
• nodejs

第一種

使用本地的命令打包到dist文件夾下后,復制到nginx的容器中.

default.conf

nginx 的默認配置文件

server {
  listen       80;
  access_log  /var/log/nginx/host.access.log;
 
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;    
  }
 
  #error_page  404              /404.html;
 
  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Dockerfile

Dockerfile 是一個用來構建鏡像的文本文件,文本內容包含了一條條構建鏡像所需的指令和說明.

FROM nginx:1.15
COPY dist/  /usr/share/nginx/html/

ADD default.conf /etc/nginx/conf.d/

WORKDIR /usr/share/nginx/html

RUN chmod -R a+rx *

docker-compose.yml

docker compose 的配置文件

docker compose 是 docker 提供的一個命令行工具,用來定義和運行由多個容器組成的應用.

version: "2"
services:
  myapp:
    build:
      context: .
      dockerfile: Dockerfile
    # 鏡像名稱
    image: vue:1.0.0 
    ports:
      - 5000:80
    restart: always
    # 容器名稱
    container_name: "myapp"

執行命令

# 構建命令
docker-compose up --force-recreate --build -d

第二種

使用 nodejs 鏡像的構建,構建后再放入nginx容器中.

default.conf

同上

Dockerfile

FROM node AS builder
WORKDIR /app

COPY . /app

RUN npm i && npm run build

FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html

ADD default.conf /etc/nginx/conf.d/

EXPOSE 80

WORKDIR /usr/share/nginx/html

RUN chmod -R a+rx *

docker-compose.yml

同上

執行命令

同上