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: 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）
    }
}