如何部署上线项目

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

文章目录

  • 多环境
    • 多环境分类
    • 前端多环境实战
      • 请求地址
      • 启动方式
      • 项目配置
    • 后端多环境实战
  • 项目部署
    • 原始部署
      • 前端
      • 后端
    • 宝塔Linux
    • Docker部署
      • 后端
      • 前端
    • Docker部署平台
    • 绑定域名
    • 跨域

多环境

  • 多环境:指同一套项目代码在不同的阶段需要根据实际情况来部署到不同的机器上,并且要调整配置
  • 为什么需要多环境: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名」的原创文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【项目】棋海争锋

🎥 个人主页:Dikz12📕格言:吾愚多不敏,而愿加学欢迎大家👍点赞✍评论⭐收藏 目录 项目介绍 WebSocket介绍 使用 项目创建 数据库设计 用户模块 登录接口 注册接口 获取用户信息接口 匹配模块 …

【Bing】开启代理后使用 Bing 搜索引擎总是: 没有与此相关的结果

【Bing】开启代理后使用 Bing 搜索引擎总是: 没有与此相关的结果 1 问题描述2 解决方法2.1 修改代理规则2.1.1 Clash Verge2.1.2 Clash Verge Rev2.1.3 V2RayN 1 问题描述 当我开了代理访问 Bing 时,经常会出现下面的页面: 2 解决方法 我所知的有三种方法: 手动关…

关于JVM-三色标记算法剖析

相关系列 深入理解JVM垃圾收集器-CSDN博客 深入理解JVM垃圾收集算法-CSDN博客 深入理解jvm执行引擎-CSDN博客 jvm优化原则-CSDN博客 jvm流程图-CSDN博客 三色标记产生的原因? 在并发标记的过程中,因为标记期间应用线程还在继续跑,对象间的引…

使用Matplotlib绘制打断图Broken Axis

使用Matplotlib绘制打断坐标轴Broken Axis 对于一批存在离群点的或者两极分化的数据,为了突出其值域差异,时常需要用到打断坐标轴效果。 使用Matplotlib绘制的效果如下: 对于同样的数据,使用brokenaxes库的绘制效果如下&#x…

Ubuntu20.04安装和编译运行lidar_align来联合标定lidar与imu的外参

硬件:树霉派4b 1、下载并安装lidar_align mkdir -p lidar_align/src cd lidar_align/src git clone https://github.com/ethz-asl/lidar_align.git 将 lidar_align/src/lidar_align/NLOPTConfig.cmake 文件移动到 lidar_align/src/ 下(与lidar_align同级) NLOP…

ShardingSphere-ShardingSphere读写分离和数据脱敏

文章目录 一、读写分离1.1 读写分离1.2 读写分离应用方案1.3 分表+读写分离1.4 分库分表+读写分离二、ShardingSphere-JDBC读写分离2.1 创建SpringBoot并添加依赖2.2 创建实体类2.3 创建mapper2.4 配置读写分离2.5 测试测试插入数据测试读测试事务一致性测试负载均衡一、读写分…

vue3+echarts:echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…

【H3C】开启web管理页面H3C S5120V2 Series

配置步骤 1.创建对应vlan并放行通过 2.添加vlanfi的ip地址 3.开启http和https的服务 4.创建用户,配置密码,配置服务类型,赋予权限 假设终端连接在交换机的g1/0/1口 假设终端的ip地址为(Ubuntu):192.168.200.11 /24 假设交换机vlan…

【Java 刷题记录】双指针

双指针 1. 移动零 283. 移动零 - 力扣(LeetCode) 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: n…

关于Ansible模块 ④

转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 继《关于Ansible的模块 ①》、《关于Ansible的模块 ②》与《关于Ansible的模块 ③》之后,继续学习ansible常用模块之…

P3654 First Step (ファーストステップ) Python深搜

First Step (ファーストステップ) 题目背景 知らないことばかりなにもかもが(どうしたらいいの?) 一切的一切 尽是充满了未知数(该如何是好) それでも期待で足が軽いよ(ジャンプだ!&#xff09…

已解决:windows 下无法加载文件 xxx.ps1,因为在此系统上禁止运行脚本

目录 1,问题描述2,问题解决 1,问题描述 当通过 npm 全局安装依赖后(比如 ts 对应的 tsc 命令,还有 pnpm),想直接使用安装的命令,就会报错: 2,问题解决 以管…

12+炫酷地图可视化效果,这次还真的有源码。

2023-09-17 22:35贝格前端工场 Hi,大家好,我是贝格前端工场,之前分享过各类UI图、动图、3D图、流程图,好多粉丝朋友给我要源文件,因为种种原因,无法提供。 本次分享12个炫酷的地图可视化效果,…

实现几何对象按照一定距离向外缓冲

1、首先&#xff0c;确保你已经引入了Turf.js库。你可以通过在HTML文件中添加以下代码来引入 <script src"https://cdn.jsdelivr.net/npm/turf/turf6.5.0/turf.min.js"></script>2、使用turf.buffer实现几何对象按照设定距离扩充 let originalCoordinat…

LeetCode 使数组连续的最少操作数

地址&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 难度&#xff1a;困难 题目描述&#xff1a;给你一个整数数组 nums 。每一次操作中&#xff0c;你可以将 nums 中 任意 一个元素替换成 **任意 **整数。 如果 nums 满足以下条件&#xff0c;那么它是 连续的 &#x…

Shopee虾皮100%有效提高广告效果的案例分享

Shopee 店铺运营中存在三种广告类型&#xff0c;分别是:关键词广告、关联广告和店铺广告。其中使用最为普遍&#xff0c;主控权最为直接的就是关键词广告&#xff0c;TA的适用范围最广&#xff0c;起效最快&#xff0c;并且可根据自身运营的能力去调控投入产出比&#xff0c;深…

SVM向量支持机

1.通俗理解 svm&#xff1a;support vector machine目标&#xff1a;利用超平面将两类数据分割开来&#xff0c;这个超平面就是我们要设计的对象 如何设计&#xff1f;我们设计之后会有间隔&#xff0c;间隔越大分类效果就越好&#xff1b;距离决策边界最近的点我们成为支持向…

个人求职简历(精选8篇)

HR浏览一份简历也就25秒左右&#xff0c;如果你连「好简历」都没有&#xff0c;怎么能找到好工作呢&#xff1f; 如果你不懂得如何在简历上展示自己&#xff0c;或者觉得怎么改简历都不出彩&#xff0c;那请你一定仔细读完。 互联网运营个人简历范文> 男 22 本科 AI简历…

【已完成】把Win10右键改回Win7的模样

win11右键设置成原来模样的方法如下&#xff1a; 1、winr打开运行窗口&#xff0c;输入regedit&#xff0c;按下回车键确认即可打开注册表。 2、在路径中输入&#xff1a;HKEY_CURRENT_USER\SOFTWARE\CLASSES\CLSID&#xff0c;或者是依次定位点开到CLSID。 3、右键点击CLSID&…

python--面向对象的三大特征---封装、继承、多态

1.封装&#xff1a; 1&#xff0c;在面向对象中&#xff0c;封装指的是一种安全机制&#xff0c;不让外界修改或者直接操作&#xff0c;将属性私有化&#xff1b; 如果要访问属性&#xff0c;提供公开的方法&#xff08;getter&#xff0c;setter&#xff09; 2. python的类如…