基于Dockerfile 搭建nginx 环境 部署 vue项目

目录结构

demo-vue
    dist
    nginx
        default.conf
    Dockerfile
    start.sh

端口说明

80：nginx 端口

8888：宿主机服务器项目端口

9003：容器内项目端口

7803：代理的后端 api 端口

1. npm build 打包 vue 项目生成 dist 目录文件

2. 编写 Dockerfile 文件

FROM nginx:1.20

COPY dist /usr/share/nginx/html/dist

COPY nginx/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

3. 编写启动脚本

#! /bin/bash

echo "demo-vue..."
sleep 3
docker stop demo-vue

sleep 2
docker rm demo-vue

docker rmi demo-vue
echo ""

echo "demo-vue packing..."
sleep 3
docker build -t demo-vue .
echo ""

echo "demo-vue running..."
sleep 3

docker run \
  -p 8888:9003 \
  --name demo-vue \
  -d demo-vue

4. 编写 default.conf 文件

server {
    listen       9003;
    server_name  192.168.0.22;  # 服务器 ip

    #charset koi8-r;

    location / {
        root   /usr/share/nginx/html/dist;
        try_files $uri $uri/ @router;  # 路由重写规则
        index  index.html index.htm;
    }

    location @router {rewrite ^.*$ /index.html last;  # 路由重写规则}
    location /api/ {proxy_pass http://192.168.0.24:7830/api/;  # 代理转发}

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    location = /50x.html {root   /usr/share/nginx/html/dist;}
} 

5. 部署

 服务器上创建目录 demo-vue

将 dist、nginx、Dockerfile、start.sh 上传到 demo-vue 目录下

执行
./start.sh

6. 启动访问

192.168.0.22:8888

效果: