vue + docker + nginx

在 vue 项目下创建 Dockerfile 文件

# FROM nginx
# COPY dist/ /usr/share/nginx/html/
# COPY ./default.conf /etc/nginx/conf.d/default.conf
# EXPOSE 80


# build stage
FROM node:16.0.0 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run docker

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

创建 default.conf 文件

server {
    listen       80;
    server_name  localhost;

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

    #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;
    }
}

运行

docker build -t your-project-name .
docker run -p 80:80 -d --name your-project-name your-project-name