前端项目部署到 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 *