一、采用 Nginx 部署前端 VueVite1. 修改配置文件修改配置文件vite.config.ts将本地环境改为开发环境注意base处只能是/不能是./2. 对项目进行打包在当前目录的终端执行npmrun build若报错如下error TS6504: File/Users/xiaochen/IdeaProjects/ChatViewer-frontend/src/components/chat/HeadPortrait.vue.jsis a JavaScript file. Did you mean toenabletheallowJsoption? Thefileisinthe program because: Matched by include patternsrc/**/*intsconfig.vitest.jsonerror TS6504: File/Users/xiaochen/IdeaProjects/ChatViewer-frontend/src/components/gpt/ConversationCard.vue.jsis a JavaScript file. Did you mean toenabletheallowJsoption? Thefileisinthe program because: Matched by include patternsrc/**/*intsconfig.vitest.json则执行npm run build-only在当前项目的文件夹下可以看到dist文件夹该文件夹里面的内容就是打包生成的。3、将本地项目上传到服务器目录将dist文件夹的文件上传到服务器前端项目所在的目录/var/www/vue_app/最好是统一在var/www目录下采用scp进行远程文件传输scp 本地项目路径 服务器项目路径scp-r/Users/xiaochen/IdeaProjects/ChatViewer-frontend/dist root8.xxx.xxx.79:/var/www/vue_app/安装nginx//安装sudoapt-getinstallnginx //启动服务sudosystemctl start nginx //设置开机启动sudosystemctlenablenginx // 检查安装是否成功sudonginx-t显示如下则表示安装成功5. 添加配置文件在/etc/nginx/sites-available目录下创建一个新的文件命名为vueapp 然后编辑配置文件sudonano/etc/nginx/sites-available/vueapp参考设置如下server{listen80;server_name8.130.xxx.xxx服务器ip;root /var/www/vue_app/dist服务器前端项目目录;index index.html;#vue-router配置location /{try_files$uri$uri/ router;index index.html;}location router{rewrite ^.*$ /index.html last;}location ~\.js${root /var/www/vue_app/dist;types{application/javascript js;}try_files$uri404;}location ~\.css${root /var/www/vue_app/dist;types{text/css css;}try_files$uri404;}location /api/{proxy_pass http://localhost:8088/;proxy_set_header Host$host;proxy_set_header X-Real-IP$remote_addr;proxy_set_header X-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto$scheme;}error_page404/404.html;location/404.html{internal;}}注意以下两个设置server_name8.130.xxx.xxx服务器ip;root /var/www/vue_app/dist服务器前端项目目录;location /api/ proxy_pass http://localhost:8088/;后端项目服务接口重启nginxsudosystemctl reload nginx访问8.130.xxx.xxx服务器ip如果显示成功则说明配置成功。二、采用Docker compose 部署SpringBoot后端项目打包项目采用Maven的打包方式打包前面可以clean然后install再进行打包打包后的文件在target目录下上传jar包到服务器指定目录/root/myappscp-r/Users/xiaochen/IdeaProjects/ChatViewer-main/ChatViewer-main/target/blog-0.0.1-SNAPSHOT.jar root服务器ip/root/myapp在服务器项目所在根目录/root/myapp编写Dockerfile文件指明jdk版本、工作目录、暴露端口# 使用 OpenJDK 17 作为基础镜像FROM openjdk:17-jdk-slim# 设置工作目录WORKDIR /app# 复制项目的 jar 文件到容器中COPY target/your-app.jar /app/app.jar# 暴露应用端口EXPOSE 8088# 启动应用ENTRYPOINT[java,-jar,/app/app.jar]在服务器项目所在根目录/root/myapp编写docker-compose.yml 文件我这里用到了MYSQL数据库、Redis、MinIO、RabbitMQversion:3.3services:app:build:.container_name:springboot_appports:-8080:8080environment:-SPRING_DATASOURCE_URLjdbc:mysql://db:3306/blog-SPRING_DATASOURCE_USERNAMEroot-SPRING_DATASOURCE_PASSWORD密码-SPRING_REDIS_HOSTredis-SPRING_REDIS_PORT6379-SPRING_REDIS_PASSWORD密码-RABBITMQ_HOSTrabbitmq-MINIO_ENDPOINThttp://minio:9000-MINIO_ACCESS_KEY自己设定-MINIO_SECRET_KEY自己设定depends_on:-db-redis-rabbitmq-miniodb:image:mysql:8.0container_name:mysql_dbrestart:alwaysenvironment:MYSQL_ROOT_PASSWORD:123456# 设置 root 用户的密码MYSQL_DATABASE:blog# 创建的默认数据库MYSQL_USER:自己设定# 创建的数据库用户MYSQL_PASSWORD:自己设定# 创建的数据库用户密码ports:-3306:3306volumes:-db_data:/var/lib/mysqlredis:image:redis:6.2container_name:redis_serverrestart:alwaysports:-6379:6379rabbitmq:image:rabbitmq:3-managementcontainer_name:rabbitmq_serverrestart:alwaysports:-5672:5672-15672:15672# RabbitMQ 管理控制台minio:image:minio/miniocontainer_name:minio_serverrestart:alwaysports:-9000:9000environment:MINIO_ACCESS_KEY:自己设定MINIO_SECRET_KEY:自己设定command:server /datavolumes:db_data:构建镜像启动服务构建 Docker 镜像docker-composebuild 启动所有服务docker-composeup-d6、查看日志检查后端是否正常启动docker-composelogs-fapp