docker 单页面部署

单页面应用的静态资源

一般的单页面应用通过npm run build打包成静态文件，再通过nginx 配置，就可以访问了。

以部署 vue-vite-test 单页面应用为例，使用npm run build ，静态资源目录是/dist

创建dockerfile

FROM node:14-alpine
WORKDIR /app
COPY package.json package-lock.json /app
RUN npm install

COPY . /app
RUN npm run build

CMD npx serve -s dist
EXPOSE 3000

构建体积优化

FROM node:14-alpine as builder
WORKDIR /app

COPY package.json package-lock.json /app
RUN npm install

COPY . /app
RUN npm run build

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder app/dist /usr/share/nginx/html

创建docker-compose.yaml

version: "3"
services:
  route:
    build:
      context: .
      dockerfile: app.Dockerfile
    ports:
      - 3000:80

创建nginx.conf

server{
    listen 80;
    server_name localhost;

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

    location / {
        try_files $uri $uri/ /index.html;

        expires -1;
    }

    location /assets {
        expires 1y;
    }
}

使用docker-compose up --build进行构建

访问 http://localhost:3000 ,就可以看到页面了。

github 地址