dz论坛网站源码,用织梦做的学校网站,ic网站建设,找项目做区域代理提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言0.环境说明和准备1.前端多环境打包1.1前端多环境设置1.2打包 2.后端项目多环境配置以及打包2.1后端多环境配置2.2项目打包 3.文件上传4.后端镜像制作4.1dockerf… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言0.环境说明和准备1.前端多环境打包1.1前端多环境设置1.2打包 2.后端项目多环境配置以及打包2.1后端多环境配置2.2项目打包 3.文件上传4.后端镜像制作4.1dockerfile编写4.2构建镜像4.3容器允许 5.前端镜像制作5.1nginx配置文件5.2dockerfile文件编写5.3构建镜像5.4容器运行5.5测试 总结 前言
本篇文章用来记录如何将一个springbootvue开发的项目部署到云服务器上。分别打包前后端为一个镜像方便以后再次部署。 0.环境说明和准备
我们会有一台云服务器并且在上面安装配置好了宝塔面板很多提供商都提前装好的然后安装好了docker工具。
登录并访问宝塔页面我们先选择安装推荐设置 环境安装好后我们先要将项目打包。 不管是前端还是后端项目都有多环境的配置允许我们在不同的场景间切换配置接下来我们看看前后端分别如何完成多环境切换并且打包的。
1.前端多环境打包
1.1前端多环境设置
这里简单提一下前端如何进行多环境设置 前端对于vue项目来说我们要使用多环境就会为每个环境编写.env文件。然后在执行vue-cli的打包命令时额外通过–mode参数来指定要激活的环境。 然后在打包后的文件中加载的数据就是对应的.env文件中的数据。
1.2打包
设置好多环境后我们先使用vue-cli工具将项目打包命令是vue-cli-service build可以先在package.json文件中进行封装 执行完成后会生成一个dist文件夹来存放我们打包好的文件。 打包时不指定mode则我们默认读取的是.dev.production这个环境配置文件。 然后我们可以得到打包后的dist文件夹
2.后端项目多环境配置以及打包
2.1后端多环境配置
这里也只是简单提一下 大体来说就是提供多个application-环境名的配置文件来进行不同环境下的配置。 然后在主要配置文件(application.yml)下使用spring.profiles.active配置项目来指定当前启用的环境
2.2项目打包
我们使用maven打包
3.文件上传
打包好后就可以将打包好的前端dist目录和后端jar包上传到服务器FTP或其他工具都可以这里使用宝塔面板的话直接使用它提供的上传功能即可。
4.后端镜像制作
4.1dockerfile编写
我们先制作后端的镜像首先我们需要先拿到一个JDK的镜像作为基础镜像这个JDK的版本要和项目需求的版本相符。 我们在与jar包同级的目录中创建dockerfile文件并编写其内容如下
FROM openjdk:17
WORKDIR /app
//这里SPRING_ENV就是环境变量名对应项目配置文件中${}中的内容
//设置了一个默认值dev, 代表默认情况下以开发模式下的配置执行
ENV SPRING_ENVdev
COPY myproject.jar /app
EXPOSE 9090
CMD [java, -jar, myproject.jar]如果是在多环境下要做到能够在运行容器时切换环境那么需要使用环境变量 首先在项目的配置文件中应该将激活环境的配置项的值修改为从环境变量获取
4.2构建镜像
然后我们使用docker build命令构建镜像 然后我们可以看到镜像构建完成
4.3容器允许
下来就可以使用docker run命令来运行容器了为了方便展示使用-it参数让其展示运行效果在界面上 docker run -it -p 9090:9090 --name bootproject myprojectimage:latest 至此后端部署完成然后去服务器防火墙配置中将9090端口放行即可。
5.前端镜像制作
5.1nginx配置文件
我们要使用nginx服务器部署项目那么我们要先编写好nginx的配置文件。 我们在dist同级的目录下创建好nginx.conf文件为了方便也可以在自己电脑中编写好后再上传到服务器在里面配置好端口、项目路径、ip等。以下是这次的配置文件
# nginx进程数
worker_processes 1;
# 事件区块
events {
# 单个进程最大连接数worker_connections 1024;
}
# 设定http服务器
http {#include导入外部文件mime.types将所有types提取为文件然后导入到nginx配置文件中include mime.types;#默认文件类型default_type application/octet-stream;#开启高效文件传输模式sendfile指令指定nginx是否调用sendfile函数来输出文件对于普通应用设为 on如果用来进行下载等应用磁盘IO重负载应用可设置为off以平衡磁盘与网络I/O处理速度降低系统的负载。注意如果图片显示不正常把这个改成off。sendfile on;#长连接超时时间单位是秒keepalive_timeout 65;# 第一个Server区块开始表示一个独立的虚拟主机站点server {# 提供服务的端口默认80listen 9528;# 提供服务的域名主机名server_name localhost;#服务默认启动目录root G:/nginx-1.26.2/html/dist;# 默认的首页文件多个用空格分开index index.html;location / {try_files $uri $uri/ /index.html;}error_page 500 502 503 504 /50x.html;location /50x.html {root html;}}server {listen 9529;server_name localhost;root G:/nginx-1.26.2/html/distdev;index index.html;location / {try_files $uri $uri/ /index.html;}# 错误页面路由# 出现对应的http状态码时使用50x.html回应客户error_page 500 502 503 504 /50x.html;# location区块开始访问50x.htmllocation /50x.html {# 指定对应的站点目录为htmlroot html;}}
}
这里我将不同环境打包生成的dist目录分别配置在两个server配置中为其分配不同端口server_name改为自己的服务器名 需要注意的是对于vue项目而言需要额外配置访问根路径时的文件匹配规则也就是
location / {try_files $uri $uri/ /index.html;}5.2dockerfile文件编写
接下来来编写dockerfile文件内容如下 因为我们在nginx中分别为不同环境的项目包配置了不同的server所以这里也要暴露两个端口。 然后将项目目录和nginx配置文件分别放到指定位置nginx的配置目录和项目目录
5.3构建镜像 5.4容器运行 5.5测试
我访问服务器对应前端接口发现页面错误 查看日志报错信息如下 表示发生了重定向循环 于是开始排查问题
我们可以使用 docker exec -i -t 容器id /bin/bash来与容器的linux进行交互 可以看到使用该命令我们可以进入容器的linux系统中每个容器都可以当作是一个小的linux系统 然后我们分别进入存放项目文件和nginx配置文件的路径中查看发现容器中并不存在我们的dist目录。 说明我们本地的项目文件并没有被成功的放到容器中于是通过docker cp命令在容器运行时手动复制项目文件到容器中解决问题。 总结
本文章是对一个简单的项目部署流程的记录。现在有了前后端镜像后可以进一步使用docker compose工具进行容器的批量运行将前后端的部署工作也放到一起。
