Nginx + Docker Compose前后端分离部署到服务器过程记录
创始人
2024-09-26 18:20:57
0

一、采用Nginx部署前端VUE(Vite)

1、修改配置文件vite.config.ts,将本地环境改为开发环境
在这里插入图片描述
注意base处只能是‘/’ 不能是 ‘./'!在这里插入图片描述

  1. 对项目进行打包

在当前目录的终端执行:npm run build

若报错如下:

error TS6504: File '/Users/xiaochen/IdeaProjects/ChatViewer-frontend/src/components/chat/HeadPortrait.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?   The file is in the program because:     Matched by include pattern 'src/**/*' in 'tsconfig.vitest.json'  error TS6504: File '/Users/xiaochen/IdeaProjects/ChatViewer-frontend/src/components/gpt/ConversationCard.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?   The file is in the program because:     Matched by include pattern 'src/**/*' in 'tsconfig.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 root@8.xxx.xxx.79:/var/www/vue_app/ 
  1. 安装nginx
//安装 sudo apt-get install nginx //启动服务 sudo systemctl start nginx //设置开机启动 sudo systemctl enable nginx // 检查安装是否成功 sudo nginx -t 

显示如下则表示安装成功!
在这里插入图片描述
5. 添加配置文件

在/etc/nginx/sites-available目录下创建一个新的文件,命名为vueapp, 然后编辑配置文件:

sudo nano /etc/nginx/sites-available/vueapp 

参考设置如下:

server {     listen 80;     server_name 8.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 $uri =404;     }     location ~ \.css$ {         root /var/www/vue_app/dist;         types { text/css css; }         try_files $uri =404;     }     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_page 404 /404.html;     location = /404.html {         internal;     } }  

注意以下两个设置:

server_name 8.130.xxx.xxx(服务器ip);  root /var/www/vue_app/dist(服务器前端项目目录);  location /api/  	proxy_pass http://localhost:8088/;(后端项目服务接口) 

重启nginx:
sudo systemctl reload nginx

访问8.130.xxx.xxx(服务器ip),如果显示成功则说明配置成功。

二、采用Docker compose 部署SpringBoot后端项目

  1. 打包项目
    采用Maven的打包方式,打包前面可以clean然后install再进行打包在这里插入图片描述
    打包后的文件在target目录下:
    在这里插入图片描述
  2. 上传jar包到服务器指定目录:/root/myapp
scp -r /Users/xiaochen/IdeaProjects/ChatViewer-main/ChatViewer-main/target/blog-0.0.1-SNAPSHOT.jar root@服务器ip/root/myapp 
  1. 在服务器项目所在根目录/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"]  
  1. 在服务器项目所在根目录/root/myapp编写`docker-compose.yml 文件
    (我这里用到了MYSQL数据库、Redis、MinIO、RabbitMQ)
version: '3.3'  services:   app:     build: .     container_name: springboot_app     ports:       - "8080:8080"     environment:       - SPRING_DATASOURCE_URL=jdbc:mysql://db:3306/blog       - SPRING_DATASOURCE_USERNAME=root       - SPRING_DATASOURCE_PASSWORD=密码       - SPRING_REDIS_HOST=redis       - SPRING_REDIS_PORT=6379       - SPRING_REDIS_PASSWORD=密码       - RABBITMQ_HOST=rabbitmq       - MINIO_ENDPOINT=http://minio:9000       - MINIO_ACCESS_KEY=自己设定       - MINIO_SECRET_KEY=自己设定     depends_on:       - db       - redis       - rabbitmq       - minio    db:     image: mysql:8.0     container_name: mysql_db     restart: always     environment:       MYSQL_ROOT_PASSWORD: 123456                 # 设置 root 用户的密码       MYSQL_DATABASE: blog          # 创建的默认数据库       MYSQL_USER: 自己设定                   # 创建的数据库用户       MYSQL_PASSWORD: 自己设定       # 创建的数据库用户密码     ports:       - "3306:3306"     volumes:       - db_data:/var/lib/mysql    redis:     image: redis:6.2     container_name: redis_server     restart: always     ports:       - "6379:6379"    rabbitmq:     image: rabbitmq:3-management     container_name: rabbitmq_server     restart: always     ports:       - "5672:5672"       - "15672:15672" # RabbitMQ 管理控制台    minio:     image: minio/minio     container_name: minio_server     restart: always     ports:       - "9000:9000"     environment:       MINIO_ACCESS_KEY: 自己设定       MINIO_SECRET_KEY: 自己设定     command: server /data  volumes:   db_data:  
  1. 构建镜像启动服务
构建 Docker 镜像 docker-compose build 启动所有服务 docker-compose up -d 

6、查看日志,检查后端是否正常启动

docker-compose logs -f app 

相关内容

热门资讯

透视最新(扑克王辅助工具!软件... 自定义新版扑克王系统规律,只需要输入自己想要的开挂功能,一键便可以生成出扑克王专用辅助器,不管你是想...
推荐几款新版(wepoke真的... 推荐几款新版(wepoke真的有挂)外挂透明挂辅助插件(透视辅助)软件透明挂(有挂中牌率)-哔哩哔哩...
免费测试版(玉溪娱乐室)外挂透... 免费测试版(玉溪娱乐室)外挂透视器辅助安装(辅助)原来确实真的是有挂(2020已更新)(哔哩哔哩);...
2分钟了解(wpk安卓版本)外... 自定义新版wpk安卓版本系统规律,只需要输入自己想要的开挂功能,一键便可以生成出wpk安卓版本专用辅...
一分钟了解揭秘!wepoker... 一分钟了解揭秘!wepoker破解器激活码(透视挂),太难了其实真实是有挂的,实用技巧(有挂助手)-...
一分钟了解!友乐互娱智能辅助插... 大家肯定在之前友乐互娱智能辅助插件或者友乐互娱智能辅助插件中玩过一分钟了解!友乐互娱智能辅助插件(辅...
辅助透视(wpk到底有辅助!软... 辅助透视(wpk到底有辅助!软件透明挂)辅助(透视)辅助透视软件(有挂总结)-哔哩哔哩;亲,有的,a...
玩家必看科普(皇豪互众控制系统... 玩家必看科普(皇豪互众控制系统)外挂透视器辅助工具(透视挂)原来确实是有挂(2024已更新)(哔哩哔...
透明有挂(impoker)外挂... 透明有挂(impoker)外挂软件透明挂助手(透视)软件透明挂(有挂打法)-哔哩哔哩;超受欢迎的im...
每日必看(wpk检测)外挂透明... 自定义新版wpk检测系统规律,只需要输入自己想要的开挂功能,一键便可以生成出wpk检测专用辅助器,不...