vue打包项目通过docker部署nginx服务

一、构建前端代码

npm install

nmp run build

确认自己的打包路径，默认是dist，这里也可以修改。

二、将打包的项目使用dockerfile构建

dockerfile

将dist文件复制到nginx的指定的路径，前端界面的路径，还需要两个conf文件

FROM nginx:latestCOPY dist/ /usr/share/nginx/htmlCOPY ./nginx/nginx.conf /etc/nginx/nginx.confCOPY ./nginx/private/default.conf /etc/nginx/conf.d/default.confENTRYPOINT nginx -g "daemon off;"

nginx.conf

user  nginx;
worker_processes  1;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" "$request_body"''$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;keepalive_timeout  65;gzip  on;include /etc/nginx/conf.d/*.conf;
}

default.conf

注意：这里的listen的端口需要根据实际情况监听，例如本地前端项目启动的端口是5173，这里就需要写5173！！！

server {listen       5173;server_name  localhost;#charset koi8-r;#access_log  /var/log/nginx/host.access.log  main;gzip_static on;gzip on;gzip_min_length 1k;gzip_comp_level 3;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;gzip_vary on;gzip_disable "MSIE [1-6]\.";gzip_buffers 32 4k;fastcgi_intercept_errors on;server_tokens off;client_max_body_size 102400m;resolver 114.114.114.114 8.8.8.8 valid=120s;set $sentry router.anban.cloud;location / {add_header Cache-Control no-cache;root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri /index.html;}error_page  403 404 408 500 501 502 503 504 507 /index.html;}

在根目录构建镜像：

docker build -t 127.0.0.1:8389/zskj/smart-tourism/frontend:main-6a43ba08b2f39200ba0a688182a352d46a6f26ba -f ./Dockerfile .

然后在docker-compose里面直接使用该镜像

三、docker-compose启动服务

注意这里的端口和default.conf的端口一致。

version: "3"
services:smart-tourism-frontend-dev:container_name: smart-tourism-frontend-conrestart: alwaysimage: 127.0.0.1:8389/zskj/smart-tourism/frontend:main-6a43ba08b2f39200ba0a688182a352d46a6f26baports:- "5173:5173"environment:TZ: Asia/Shanghainetworks:- docker-common-net
networks:docker-common-net:external: true

然后直接启动：docker-compose up -d

最后直接访问： http://localhost:5173/login 部署成功！