如何部署上线项目

❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
🙏 个人名言:不可控之事 乐观面对
😍 系列专栏:

多环境

  • 多环境:指同一套项目代码在不同的阶段需要根据实际情况来部署到不同的机器上,并且要调整配置
  • 为什么需要多环境:1.每个环境互不影响2.区分不同的阶段 开发、测试、生产环境3.对项目进行优化:本地日志级别,精简依赖节省项目体积,项目的环境/参数可以调整比如JVM参数

多环境分类

  1. 本地环境(自己的电脑)
  2. 开发环境(远程开发)大家连同一台机器,为了大家开发
  3. 测试环境(测试)
  4. 预发布环境:和正式环境一致,正式数据库
  5. 正式环境
  6. 沙箱环境(实验环境):为了做实验

前端多环境实战

请求地址

开发环境:localhost:8000
线上环境:ming-pu.top (域名)

startFront(env){
	if(env === 'prod'){
	//生产环境
	}else{
	//保持本地开发逻辑
	}
}

在这里插入图片描述
如果用了umi框架,build时会自动传入NODE_ENV == production 参数,通过process.env.NODE_ENV就可以判断这个项目是本地启动还是生产环境启动
在这里插入图片描述

启动方式

开发环境:npm run start(本地启动,监听端口,自动更细)
线上环境:npm run build(项目构建打包),可以使用serve工具启动(npm i -g serve),npm run build之后会出现一个dist文件,通过dist文件打开终端,用serve命令启动之后,process.env.NODE_ENV就是production了

项目配置

不同的项目(框架)都有不同的配置文件,umi的配置文件是config;可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境
开发环境:config.dev.js
生产环境:config.prod.js
公共配置:config.ts

后端多环境实战

springboot项目,通过application.yml添加不同的后缀来区分配置文件;application.yml里面的配置是公共的配置,application-prod.yml里面就可以删除公共的配置,修改线上数据库的配置
在这里插入图片描述
在自带的maven中进行打jar包

然后在target中,通过终端进行jar包运行,记得传入环境变量
在这里插入图片描述
结束
主要是改依赖的环境地址:1.数据库地址2.缓存地址3.消息队列地址4.项目端口号5.tomcat服务器配置

项目部署

参考文章:https://www.bilibili.com/read/cv16179200/
需要Linux服务器(建议用centOS 8以上)

原始部署

前端

需要web服务器:nginx
安装nginx服务器:1.用系统自带的软件包管理器快速安装,比如centos的yum2.自己到官网上安装
在服务器上下载nginx的步骤:使用curl -o 文件名 文件下载地址在这里插入图片描述

  1. 通过 tar -zxvf nginx-1.21.6.tar.gz进行解压
  2. cd nginx-1.21.6进入目录
  3. 使用./configure 命令进行依赖环境检查
  4. 通过检查发现需要安装openssl这个库,才能使用https,命令是 yum install openssl openssl-devel -y
  5. 下面这个命令是使用openssl这个库./configure --with-http_ssl_module --with-http_v2_module --with-stream
  6. 使用make命令,进行nginx的编译(make命令的作用就是将这个nginx用c语言写的代码,编译成二进制可以执行的文件)
  7. 使用make install进行安装这个可执行文件
  8. 使用 ls /usr/local/nginx/sbin/nginx,如果它是绿色的,就说明是可执行的文件
  9. 我们需要把nginx配置到环境变量中,使用命令vim /etc/profile进入环境变量;之后使用shift+g跳到最后一行,点击i在最后一行插入一条命令 export PATH=$PATH:/usr/local/nginx/sbin 然后按esc,再输入:wq进行退出
  10. 配置完环境变量之后,执行source /etc/profile 重新激活环境变量,然后就可以在任何的文件夹下执行nginx命令执行 nginx了
  11. 通过netstat -ntlp查看启动情况
  12. 然后前端项目build打包,然后把打的项目包dist压缩后,直接拖拽到services目录下(如果上传多了,使用rm -rf xxx删除文件)
  13. 通过unzip dist.zip -d user-center-front 进行解压
    在这里插入图片描述
  14. 之后需要修改nginx的配置文件(注意,要修改的是/usr/local/nginx/conf这个目录下面的nginx.conf文件才好用),配置进入页面的目录,esc+wq修改完之后,执行nginx -s reload进行重新加载
    下面这个user root;原来是一个注释默认是user nobody,在第一行,把它改成user root即可;
    在这里插入图片描述
    在这里插入图片描述

后端

需要安装java,maven(打包)
这段是安装javayum install -y java-1.8.0-openjdk*
通过 curl -o apache-maven-3.9.6-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.9.6/binaries/apache-maven-3.9.6-bin.tar.gz去安装maven
在这里插入图片描述

  1. 通过 tar -zxvf apache-maven-3.8.5-bin.tar.gz进行解压
  2. 进入bin目录之后,就会看到mvn的可执行文件,这个就是可以构建项目了
  3. 为了方便,配置一下环境变量,首先通过pwd获取当前的路径,然后使用命令vim /etc/profile进入环境变量;之后使用shift+g跳到最后一行,点击i在最后一行插入一条命令 export PATH=$PATH:/root/services/apache-maven-3.9.6/bin, 然后按esc,再输入:wq进行退出
  4. 配置完环境变量之后,执行source /etc/profile 重新激活环境变量
  5. 安装git yum install -y git
  6. git clone xxxx,把文件下载下来,然后cd xxx进入clone的文件夹
  7. 执行mvn package -DskipTests,通过这个命令,把已有的项目打包成可执行的jar包,通过-DskipTests跳过测试
  8. 之后会出现一个jar包,之后执行chmod a+x user-center-backend-0.0.1-SNAPSHOT.jar,将这个jar添加可执行权限
  9. 之后执行nohup java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &,之后按回车,然后再输入jobs就能看到执行的命令了在这里插入图片描述

宝塔Linux

这是一个Linux 可视化的运维面板

  1. 首先安装一个宝塔Linux,也可以买一个腾讯云的轻量应用服务器,直接就可以提供默认的系统镜像(宝塔Linux直接就提供了)
  2. 进入之后,点开面板设置,首先修改一下面板的用户名和密码
  3. 然后进入到软件商店,搜索nginx,选择快速安装在这里插入图片描述
  4. 安装java,搜索tomcat,最好安装9.0.0.M18 Stable在这里插入图片描述
  5. 下载完之后,点击终端,执行命令,测试java和nginx是否下载完毕
  6. 之后我们点开网站,然后添加站点
    在这里插入图片描述
  7. 之后填写内容,第一个是域名ming-pu.top,下面这些都不用修改,然后直接提交,之后就创建好站点了
    在这里插入图片描述
  8. 之后点击根目录,把文件都删掉
    在这里插入图片描述
    在这里插入图片描述
  9. 之后把前端打包好的文件dist全部拖进去,前端就部署好了;如果你要自己改nginx的配置,操作有个设置,然后点击配置文件,就是nginx的修改配置文件了
    在这里插入图片描述
  10. 配置java项目在这里插入图片描述加一个–server.address=0.0.0.0,将tomcat默认是ipv6,改成ipv4
    在这里插入图片描述
    如果不行的话,就在代码的配置文件中修改
    在这里插入图片描述
    记得在宝塔的白名单中,开放8080端口
    在这里插入图片描述

Docker部署

Docker是容器,可以将项目依赖的环境(比如java,nginx)和项目的代码一起打包成镜像,所有同学都能下载镜像,镜像更容易分发和移植。
在启动项目时,不需要敲一大堆命令,而是直接下载镜像,启动镜像就可以了。
docker可以理解为软件安装包。

后端

  1. 在宝塔中安装docker,通过docker -v命令,判断是否安装成功docker
  2. 之后要在前后端的项目分别指定一个Dockerfile,用于指定构建Docker镜像的方法,Dockerfile一般情况下不需要完全从0自己写,建议去github,gitee 等托管平台参考同类项目(比如springboot)
    在这里插入图片描述
    首先,第一个FROM就是我们这个Docker镜像,依赖于哪个基础镜像
    WORKDIR : 指定工作目录
    COPY:就是把需要复制的东西从本机都复制到工作目录,基本都是把配置文件和代码包复制到了工作目录中
    RUN :执行打包的命令
    CMD/ENTRYPOINT(可以附加额外的参数):运行镜像的时候,默认执行的命令
  3. 我们要先把项目的所有的代码上传到服务器上,然后通过docker命令,根据dockerfile制作一个镜像
    在这里插入图片描述
  4. 通过命令[sudo] docker build -t user-center-backend:v0.0.1 .,注意最后面有个点,如果没有权限的话(提示Permission denied),前面加个sudo就可以

前端

在这里插入图片描述
前端比较特殊,除了加一个Dockerfile,还要加一个nginx.conf的配置
try-files就是为了避免404的问题,如果访问不到页面,就降级到index.html
在这里插入图片描述
改完代码之后,在服务器把前端的项目也克隆下来,然后执行docker命令[sudo] docker build -t user-center-frontend:v0.0.1 .,等待构建(其实前端和后端构建docker都差不多)
在这里插入图片描述
如果构建完了,我们可以通过[sudo] docker images命令去看到我们构建的镜像
最后通过[sudo] docker run xxxx命令,启动镜像
docker run -p 80:80 -v /data/app:/usr/share/nginx/html/ -d user-center-frontend:v0.0.1这段命令,运用了虚拟化的技术,-v进行了目录映射,将本机资源和容器内部的资源进行关联,-p还进行了端口影射,将本机的端口和容器应用的端口进行关联 ,-d是镜像的名称
通过命令docker ps -a查看已经在运行的容器ID,然后使用容器ID进入容器
如果你想进入容器,命令是docker exec -i -t xxx容器的id /bin/bash ,通过exit命令退出容器
如果你想杀掉容器,命令是docker kill xxx容器的id,就可以杀掉容器了
如果想查看docker执行的日志,通过docker logs xxx容器的ID,就可以查看docker执行的输出日志了
如果你想要查看所有的镜像名称,通过docker images命令,即可查看
如果你想要删除镜像,通过docker rmi -f xxx镜像的名称,就可以杀掉镜像了

Docker部署平台

  1. 云服务商的容器平台(腾讯云,阿里云)
  2. 面向某个领域的容器平台(前端/后端 微信云托管)
    但是这些都是要花钱的,慎用!

容器平台的好处:1.不用输入命令操作,更方便省事2.不用在控制台操作,更傻瓜式,更简单3.大厂提供,比自己运维更省心4.额外的能力,比如监控,告警,其他(存储,负载均衡,自动扩容,流水线自动构建)

绑定域名

通常情况下,浏览器的默认端口为80。
前端项目访问: 用户输入网址 => 域名解析服务器(把网址解析为ip地址/ 交给其他的域名解析服务,例如cdn,实现负载均衡)=> 服务器 => 宝塔防火墙 => nginx接受请求,找到对应文件,返回文件给前端 => 前端加载文件到浏览器(js,css)=> 渲染页面

后端访问项目:用户输入网址 => 域名解析服务器 => 服务器 => nginx接受请求 => 后端项目(比如8080端口)

nginx反向代理:替代服务器接受请求,转发请求,可以解决后端域名不用写8080端口的问题

跨域

浏览器为了用户的安全,仅允许向同域名,同端口的服务器发送请求
浏览器在发送请求之前,就会发送一个预检查请求,请求方法是OPTIONS,用于检查是否跨域
解决方法:

  1. 改成同域名同端口
    让服务器告诉浏览器:允许跨域返回(cross-origin-allow响应头)
  2. 网关支持(在宝塔Linux中修改Nginx配置)
  3. 修改后端服务(全局请求拦截器,配置@CrossOrigin注解)

————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

  • 21
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李小浦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值