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

一、构建前端代码

npm install

nmp run build

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

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

dockerfile

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

FROM nginx:latest

COPY dist/ /usr/share/nginx/html

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

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

ENTRYPOINT 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-con
    restart: always
    image: 127.0.0.1:8389/zskj/smart-tourism/frontend:main-6a43ba08b2f39200ba0a688182a352d46a6f26ba
    ports:
      - "5173:5173"
    environment:
      TZ: Asia/Shanghai
    networks:
      - docker-common-net
networks:
  docker-common-net:
    external: true

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

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