前端Vue项目整合nginx部署到docker容器

一、通过Dockerfile整合nginx方法：

1，使用Vue CLI或npm脚本构建生产环境下的Vue项目。

npm run build
or
yarn build

2，构建完成后，项目目录中会生成一个dist文件夹，里面包含了所有静态资源文件（HTML、CSS、JavaScript）。
3，创建Dockerfile文件

# 使用官方Nginx镜像作为基础镜像
FROM nginx:latest
#复制前端项目的构建文件到Nginx的html目录
COPY  /path/dist/ /usr/share/nginx/html
#复制自定义的Nginx配置文件到容器内
COPY nginx.conf /etc/nginx/nginx.conf
#暴露端口
EXPOSE 80
#设置容器启动时执行的命令
CMD ["nginx", "-g", "daemon off;"]

注意： dist文件夹的实际路径，并且这个路径是在Dockerfile的上下文中的路径。你可能需要将Vue项目和Dockerfile放在同一个目录下，或者使用相对路径

4、自定义nginx.conf配置文件，添加或修改以下内容以指向Vue项目的dist目录，并配置静态文件服务。

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;events {worker_connections 1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;tcp_nopush      on;tcp_nodelay     on;keepalive_timeout  65;types_hash_max_size 2048;include /etc/nginx/conf.d/*.conf;# 自定义服务器配置server {listen       80;server_name  localhost;#指定前端项目所在的位置location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html;}# 其他自定义配置，如代理设置、重写规则等# 反向代理方式# location /api {#    rewrite /api/(.*) /$1 break;#   proxy_pass http://aipro:8080;# }# 错误页面配置error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}}# 其他服务器配置...
}

注意：由于我们将使用Docker挂载，所以root指令应指向容器内的挂载点，即/usr/share/nginx/html。

5，用了Dockerfile并构建了镜像，则运行以下命令：

docker run -d --name myverify -p 80:80  --network mybridge verify

6，验证部署
打开浏览器，访问你的域名或服务器IP地址，应该能看到Vue应用程序。

二、通过挂载了配置文件和静态文件目录方法

1，准备Nginx容器，拉取Nginx镜像：

docker pull nginx:latest
or
docker pull nginx:xxx  # xxx为具体版本号

mkdir -p /home/nginx/conf
mkdir -p /home/nginx/log
mkdir -p /home/nginx/html

3，创建Nginx配置文件：
在宿主机上创建Nginx外部挂载的配置文件，例如/home/nginx/conf/nginx.conf。这个文件将包含自定义的Nginx配置。

server {listen 80;server_name yourdomain.com www.yourdomain.com;  # 替换为你的域名或IP地址root /usr/share/nginx/html;  # 容器内的静态文件根目录，将通过挂载实现index index.html;location / {try_files $uri $uri/ /index.html;  # 单页面应用路由配置}# 其他配置，如日志、错误处理等error_log /var/log/nginx/yourapp.error.log;access_log /var/log/nginx/yourapp.access.log;
}

4，如果你选择在宿主机上手动复制，可以使用以下命令：

cp -r /path/to/your/vue/app/dist/* /home/nginx/html/

5,挂载了配置文件和静态文件目录，则运行以下命令：

docker run -d -p 80:80 --name your-nginx-container-name \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
nginx:latest