docker+nginx部署

不务正业的前端学徒2026-01-10 16:11

nginx.conf

js 复制代码

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        

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

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Dockerfile

js 复制代码

#引入node
FROM node as build
#拷贝当前文件夹到docker中的demo文件夹，demo文件夹自动生成
COPY . ./demo
#定位到demo文件夹
WORKDIR /demo
#设置源
RUN npm config set registry https://registry.npm.taobao.org
#下载
RUN npm install
#打包
RUN npm run build
#引入nginx
FROM nginx
#复制项目的nginx.conf到 /etc/nginx目录，并修改为文件名为nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf
#复制生成的dist文件夹到nginx的html目录下
COPY --from=build /demo/dist /usr/share/nginx/html
#显式地标明镜像开放端口，一定程度上提供了操作的便利，也提高了 Dockerfile 的可读性和可维护性
EXPOSE 80
#运行nginx
CMD ["nginx","-g","daemon off;"]

项目根目录运行命令，打包为镜像

js 复制代码

docker image build -t vue_nginx_demo .

运行镜像

js 复制代码

docker container run -p 8090:80 -d vue_nginx_demo

其他的自动化，使用jenkins或者k8s写部署脚本