SSM聚合项目+Vue3+Element-plus项目生产部署（Ubuntu24.04LTS）-前端部署

前端打包+前端部署

前端vue项目打包之后，会产生一个dist文件夹，里面是该项目的静态运行文件

解压到一个指定的路径

使用nginx反向代理这个路径，使我们可以直接访问到这个路径

user www-data;
worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}


#mail {
#       # See sample authentication script at:
#       # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#       # auth_http localhost/auth.php;
#       # pop3_capabilities "TOP" "USER";
#       # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#       server {
#               listen     localhost:110;
#               protocol   pop3;
#               proxy      on;
#       }
#
#       server {
#               listen     localhost:143;
#               protocol   imap;
#               proxy      on;
#       }
#}

然后在/etc/nginx/sites-enabled下，我们可以发现这样一个配置文件：

server {
    listen 8080;  # 监听端口，处理HTTP请求
    server_name ;  # 处理的域名（如果没有域名就写公网IP）

    root /usr/zxk/project/front/dist;  # 网站根目录，Nginx将从这里提供文件（就是你的dist文件夹目录）
    index index.html;  # 默认首页文件

    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control no-cache;
    }

    location = /index.html {
        add_header Cache-Control no-cache;
    }

    location ~ .(css|js|jpg|jpeg|png|gif|ico|svg)$ {
        expires 30d;  # 设置静态资源的缓存时间为30天
        add_header Cache-Control "public";  # 添加缓存控制头
        root /usr/zxk/project/front/dist;
    }

    error_page 404 /404.html;  # 自定义404错误页面
    location = /404.html {
        internal;  # 仅内部请求可以访问404页面
    }

    location ~ /.ht {
        deny all;  # 禁止访问以.开头的文件（如.htaccess）
    }
}

可以看到我们映射了8080端口，使其访问/usr/zxk/project/front/dist文件夹的内容