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

非常刺激的一次部署经历，我相信很多第一次独立部署前后端分离项目的人都遇到过

后端部署

jdk环境

安装jdk，解压后配置环境变量即可

tomcat运行war包

需要在tomcat的conf/sever.xml中配置SSM聚合项目的每一个子项目的服务(标签)，这样tomcat运行的时候就会自动启动对应的服务

<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN"><Listener className="org.apache.catalina.startup.VersionLoggerListener" /><Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on" /><Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener" /><Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" /><Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener" /><GlobalNamingResources><Resource name="UserDatabase" auth="Container"type="org.apache.catalina.UserDatabase"description="User database that can be updated and saved"factory="org.apache.catalina.users.MemoryUserDatabaseFactory"pathname="conf/tomcat-users.xml" /></GlobalNamingResources><Service name="Catalina"><Connector port="8088" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443" /><Engine name="Catalina" defaultHost="localhost"><Realm className="org.apache.catalina.realm.LockOutRealm"><Realm className="org.apache.catalina.realm.UserDatabaseRealm"resourceName="UserDatabase"/></Realm><Host name="localhost"  appBase="webapps"unpackWARs="true" autoDeploy="true"><Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"prefix="localhost_access_log" suffix=".txt"pattern="%h %l %u %t &quot;%r&quot; %s %b" /></Host></Engine></Service>
<Service name="Catalina1"><!-- 每个项目的端口号也要进行区分，保证不被占用 --><Connector port="9090" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443" URLEncoding="UTF-8"/><Connector port="8010" protocol="AJP/1.3" redirectPort="8443" secretRequired=""/><Engine name="Catalina1" defaultHost="localhost"><Realm className="org.apache.catalina.realm.LockOutRealm"><Realm className="org.apache.catalina.realm.UserDatabaseRealm"resourceName="UserDatabase"/></Realm><Host name="localhost"  appBase="webapps"unpackWARs="true" autoDeploy="true"><Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"prefix="localhost_access_log" suffix=".txt"pattern="%h %l %u %t &quot;%r&quot; %s %b" /><!-- 这里是想要部署的对应项目的名称 --><Context docBase="cinema_portal-1.0-SNAPSHOT" path="/" reloadable="true"/></Host></Engine></Service><Service name="Catalina2"><Connector port="9091" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443" URLEncoding="UTF-8"/><Connector port="8011" protocol="AJP/1.3" redirectPort="8443" secretRequired=""/><Engine name="Catalina2" defaultHost="localhost"><Realm className="org.apache.catalina.realm.LockOutRealm"><Realm className="org.apache.catalina.realm.UserDatabaseRealm"resourceName="UserDatabase"/></Realm><Host name="localhost"  appBase="webapps"unpackWARs="true" autoDeploy="true"><Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"prefix="localhost_access_log" suffix=".txt"pattern="%h %l %u %t &quot;%r&quot; %s %b" /><Context docBase="cinema_console-1.0-SNAPSHOT" path="/" reloadable="true"/></Host></Engine></Service>
</Server>

前端部署

前端打包+前端部署

前端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: POODLEssl_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）}
}