登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›用户中心项目部署上线03

用户中心项目部署上线03

端木茵茵 昨天 08:11
用户中心项目部署上线


  • 宝塔 Linux
  • Docuker 容器
  • 容器平台
@
目录

  • 用户中心项目部署上线
  • 多环境

    • 前端环境识别-区别-dev-test-不同的环境-使用不同的域名和环境
    • 前端页面“静态化”
    • 后端多环境：

  • 项目部署

    • 原始部署
    • 宝塔  Linux 部署
    • Docker 容器部署

  • Docker 平台部署
  • 域名设置

    • 绑定域名

  • 跨域问题(Allow CORS)解决(3 种方法)
  • 补充：SpringBoot设置Cors跨域的四种方式



      • 方式1：返回新的CorsFilter
      • 方式2：重写WebMvcConfigurer
      • 方式3：使用注解（@CrossOrigin）
      • 方式4：手工设置响应头（HttpServletResponse ）


  • 最后：

多环境

多环境：是指同一个套项目代码在不同的阶段需要根据实际情况来部署到不同的机器上，并且部署到不同的机器上。
比如：

  • 测试：部署到一个机器上
  • 开发：部署到一个服务器上，配置也是可能不同的。
为什么需要多环境：

  • 每个环境互不影响。不需要，改动已经发布到线上的项目，影响用户。
  • 为了区分不同的阶段：开发，测试
  • 对项目进行优化：

    • 本地日志：
    • 精简依赖，节省项目体积
    • 项目的环境/参数可以调整，比如 JVM 参数

  • 针对不同环境做不同的事情。
多环境分类：

  • 本地环境（自己的电脑）localhost
  • 开发环境（远程开发）大家连同一台机器，为了大家开发。
  • 测试环境（测试）——> 开发 / 测试 / 产品，性能测试 / 功能测试 / 系统集成测试 / 单元测试。注意：测试的数据库时单独的数据库。
  • 预发布环境（体验服），这里可能就是利用了，正式的数据库。基本和正式环境是一致的。
  • 正式环境（线上，公开对外访问的项目）：尽量不要改动，保证上线前的代码时“完美”运行
  • 沙箱环境（实验环境）：为了对某个功能进行测试实验之类的。
前端环境识别-区别-dev-test-不同的环境-使用不同的域名和环境
  1. startFront(env) {
  2.     if(env === 'prod') {
  3.         // 不输出注释
  4.         // 项目优化
  5.         // 修改请求地址
  6.     } else {用了umi 框架，build 时会自动传入 NODE_ENV == production 参数，start NODE_ENV 参数为 development
  7. ·启动方式
  8. ○开发环境：npm run start(本地启动，监听端口、自动更新)
  9. 。线上环境：npm run build（项目构建打包），可以使用 serve 工具启动(npmi-g serve)
  10. ·项目的配置
  11. 不同的项目（框架）都有不同的配置文件，umi的配置文件是config，可以在配置文件后添加对应的环境名称后缀来区
  12. 分开发环境和生产环境。参考文档：https://umijs.org/zh-CN/docs/deployment
  13. ·开发环境：config.dev.ts
  14. ·生产环境：config.prod.ts
  15. ·公共配置：config.ts 不带后缀
  16.         // 保持本地开发逻辑
  17.     }
  18. }
复制代码
1.png
  1. const isDev = process.env.NODE_ENV === 'development';
复制代码
用了umi 框架，build 时会自动传入 NODE_ENV == production 参数，start NODE_ENV 参数为 development

  • 启动方式

    • 开发环境：npm run start(本地启动，监听端口、自动更新)
    • 线上环境：npm run build（项目构建打包），可以使用 serve 工具启动(npmi-g serve)

  1. const request = extend ({
  2.   credentials:'include', // 默认请求是否带上 cookie
  3.   preifx : process.env.NODE_EDV = "dev" ? 'https://rainbowsea.cn' : undefined
  4.   // undefined 默认的值
  5. })
复制代码
项目的配置
不同的项目（框架）都有不同的配置文件，umi的配置文件是config，可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档：https://umijs.org/zh-CN/docs/deployment

  • 开发环境：config.dev.ts
  • 生产环境：config.prod.ts
  • 公共配置：config.ts 不带后缀
前端页面“静态化”

2.png

3.png

为每个路由都配置了一个 index.html静态页面。
后端多环境：

Spring Boot 项目，通过 application.yaml添加不同的后缀来区分配置文件。比如这里：可以添加一个 application-prod.yaml。其中配置连接的信息，是需要的生产环境的远程的数据库，而生产环境的配置
习惯：可以将创建的数据库的脚本语句，保存到项目当中（用一个目录保存起来）
可以在启动项目时，启动环境变量。
  1. java -jar .\user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod
复制代码
主要是改:
。数据库地址
。缓存地址
。消息队列地址
。项目端口号
服务器配置
项目部署

需要 Linux服务器(建议大家用CentOS 8+ / 7.6 以上)
原始部署

什么都自己在服务器当中自己安装。
前端：
需要 web 服务器：nginx、apache、tomcat
安装 nginx服务器：
1.用系统自带的软件包管理器快速安装，比如centos的yum
2.自己到官网安装 (参考文章)
  1. ll -ah # Linux 查看文件大小
复制代码
  1. curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gz
  3. tar -zxvf nginx-1.21.6.tar.gz
  5. cd nginx-1.21.6
  7.    37  2022-04-17 23:30:09 yum install pcre pcre-devel -y
  8.    39  2022-04-17 23:30:59 yum install openssl openssl-devel -y
  9.    41  2022-04-17 23:31:57 ./configure --with-http_ssl_module --with-http_v2_module --with-stream
  10.    42  2022-04-17 23:32:13 make
  11.    43  2022-04-17 23:32:54 make install
  12.    48  2022-04-17 23:33:40 ls /usr/local/nginx/sbin/nginx
  13.    vim /etc/profile
  14.   在最后一行添加：export PATH=$PATH:/usr/local/nginx/sbin       
  15.   
  16.   nginx
  17.   
  18.   netstat -ntlp 查看启动情况
复制代码
  1. curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gz # Linux 下载文件
复制代码
  1. netstat -ntlp 查看启动情况
复制代码
注意：nginx 权限
  1. ps -ef | grep 'nignx'
复制代码
后端：
Java ，maven
  1. yum install -y java-1.8.0-openjdk*
  3. curl -o apache-maven-3.8.5-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.8.5/binaries/apache-maven-3.8.5-bin.tar.gz
  5. git clone xxx 下载代码
  7. 打包构建，跳过测试
  8. mvn package -DskipTests
  10. java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod
复制代码
  1. jps 查看运行所有Java程序
复制代码
宝塔  Linux 部署

Linux 运维面板
方便管理服务器，方便安装软件。
Docker 容器部署

docker是容器，可以将项目的环境（比如 java、nginx）和项目的代码一起打包成镜像，所有同学都能下载镜像，更容易分发和移植。
再启动项目时，不需要敲一大堆命令，而是直接下载镜像、启动镜像就可以了。
docker 可以理解为软件安装包。
Docker 安装：https://www.docker.com/get-started/或者宝塔安装
Dockerfile 用于指定构建 Docker 镜像的方法
Dockerfile 一般情况下不需要完全从O自己写，建议去 github、gitee 等托管平台参考同类项目（比如 springboot)
后端项目打包 Docker 容器镜像
Dockerfile 的编写

  • FROM 依赖的基础镜像
  • WORKDIR 工作目录 一般为 app
  • COPY 从本机复制文件
  • RUN 执行命令
  • CMD / ENTRYPOINT(它可以附加额外的参数) 指定运行容器时默认执行的命令
Dockerfile 的编写 不用记，网上找
  1. FROM mave:3.5-jdk-8-alpine as
  3. WORKDIR /app  # 表示一个工作目录
  4. COPY pom.xml . # 将本地的 pom.xml 复制到当前目录下后作为镜像，上传到 DOCKer容器当中
  5. COPY src ./src
  7. RUN mvn package -DskipTests
  9. CMD ["java","/app/target/xxxxx.jar","--spring.profiles.active=prod"] # 配置启动运行参数，之类的
复制代码
根据 Dockerfile 构建镜像(将自己的项目打包成镜像文件上传，让 Docker  使用)：
  1. # 后端
  2. docker build -t user-center-backend:v0.0.1 .  # 注意：这里有一个 . 表示当前路径,注意要在可以看到 Dockerfile 路径下执行该 docker 命令
  4. # 前端
  5. docker build -t user-center-front:v0.0.1 .
  7. # 注意提示没权限要用: sudo
  8. # 注意要在可以看到 Dockerfile 路径下执行该 docker 命令
复制代码
前端项目打包 Docker 镜像
基于 Nginx 打包
  1. FROM nginx
  3. WORKDIR /usr/share/nginx/html/
  5. USER root
  7. COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf
  9. COPY ./dist  /user/share/nginx/html/
  11. EXPOSE 80
  13. CMD ["nginx","-g","daemon off;]
  16. # 注意提示没权限要用: sudo
  17. # 注意要在可以看到 Dockerfile 路径下执行该 docker 命令
复制代码
  1. # 后端
  2. docker build -t user-center-backend:v0.0.1 .  # 注意：这里有一个 . 表示当前路径,注意要在可以看到 Dockerfile 路径下执行该 docker 命令
  4. # 前端
  5. docker build -t user-center-front:v0.0.1 .
  7. # 注意提示没权限要用: sudo
  8. # 注意要在可以看到 Dockerfile 路径下执行该 docker 命令
复制代码
补充：
Nginx 降级：就是当我们的某个页面找不到的时候，防止报一个 404 错误，让其降级找我们下面配置的，这个 index.html 页面。使页面更加友好
  1. location / {
  2.   try_files $uri /index.html
  3. }
  5. // 就是当我们的某个页面找不到的时候，防止报一个 404 错误，
  6. // 让其降级找我们下面配置的，这个 index.html 页面。使页面更加友好
复制代码
补充：Docker 构建优化：减少尺寸，减少构建时间(比如多阶段构建，可以丢弃之前阶段不需要的内容，比如：这里我们让 maven 使用完了，就可以该内容从镜像当中移除了)
docker run Docker 容器启动 。
  1. # 前端
  2. docker run -p 80:80 -d user-center-frontend:v0.0.1
  4. # 后端
  5. docker run -p 8080:8080 user-center-backend:v0.0.1
复制代码
虚拟化：

  • 端口映射：把本机的资源（实际访问地址）和容器内部的资源（应用启动端口）进行关联
  • 目录映射：把本机的端口和容器应用的端口进行关联
进入容器
  1. docker exec -i -t  fee2bbb7c9ee /bin/bash
复制代码
补充：查看容器日志
  1. sudo pocker ps
  3. sudo docker logs [上面查询到的 container ID] 的哪个你所需的日志
复制代码
4.png

进入容器:
  1. docker exec -i -t  fee2bbb7c9ee /bin/bash
复制代码
查看进程：
  1. docker ps
复制代码
查看日志：
  1. docker logs -f [container-id]
复制代码
杀死容器：
  1. docker kill
复制代码
强制删除镜像：
  1. docker rmi -f
复制代码
Docker 平台部署

Docker 容器平台：

  • 云服务商的容器平台（腾讯云，阿里云）
  • 面向某个领域的容器平台（前端 webify，后端微信云托管）要米。
容器平台的好处：

  • 可视化操作，不用输入命令来操作，更方便省事
  • 不用在控制台操作，更傻瓜式，更简单。
  • 大厂运维，比自己运维更省心
  • 额外的能力：比如：监控，警告，其他（存储，负载均衡，自动扩容缩，流水线）
webfiy (Web 应用托管 比容器化更傻瓜式，不需要自己写构建应用的命令，就能启动前端项目)，目前缺点：需要将代码放到代码托管平台上，才能部署上去，不能从本地 copy 上去。优势：不用写命令，代码更新时，会被实时更新部署上。
鱼皮用的：微信云托管
域名设置

绑定域名

前端项目访问流程：用户输入网址=>域名解析服务器（把网址解析为ip地址／交给其他的域名解析服务）=>服务器：〉（防火墙）=> nginx接收请求(这里需要请求处理，要不然 Nginx 不认识这个域名)，找到对应的文件，返回文件给前端=>前端加载文件到浏览器中（js、css）=>渲染页面
后端项目访问流程：用户输入网址=>域名解析服务器=>服务器=>nginx接收请求(这里需要请求处理，要不然 Nginx 不认识这个域名)=>后端项目(比如 8080端口)
nginx反向代理的作用：替服务器接收请求，转发请求
跨域问题(Allow CORS)解决(3 种方法)

跨域问题：浏览器为了用户的安全，仅允许向同域，同端口的服务器发送请求。
浏览器在发送请求的时候，会发送一个预检请求(一般请求方法是: options)。作用：提前探探路，是否符合同域策略什么的
解决方式：

  • 把域名，端口改为相同
  • 网关支持
让服务器告诉浏览器：允许跨域（返回 cross-orign-allow 响应头），就是在请求头当中，告诉浏览器这个是安全的，可以跨域：
Nginx 网关的支持
尽量不要用 add_header Acess-Control-Allow-origin *有个缺陷，cookice 可能无法处理。
  1. # 跨域配置
  2. location ^~ /api/ {
  3.     proxy_pass http://127.0.0.1:8080/api/; # 配置反向代理
  4.     add_header 'Access-Control-Allow-Origin' $http_origin;  # 允许任何跨域
  5.     add_header 'Access-Control-Allow-Credentials' 'true'; # 允许后端带上 cookie
  6.     add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  7.     add_header Access-Control-Allow-Headers '*';
  8.     if ($request_method = 'OPTIONS') { # options 预检请求通过了,就可以访问了。
  9.         add_header 'Access-Control-Allow-Credentials' 'true';
  10.         add_header 'Access-Control-Allow-Origin' $http_origin;
  11.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  12.         add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
  13.         add_header 'Access-Control-Max-Age' 1728000;
  14.         add_header 'Content-Type' 'text/plain; charset=utf-8';
  15.         add_header 'Content-Length' 0;
  16.         return 204;
  17.     }
  18. }
复制代码
  1. # 跨域配置
  2. location ^~ /api/ {
  3.     proxy_pass http://127.0.0.1:8080/api/; # 配置反向代理
  4.     add_header 'Access-Control-Allow-Origin' $http_origin;  # 允许任何跨域
  5.     add_header 'Access-Control-Allow-Credentials' 'true'; # 允许后端带上 cookie
  6.     add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  7.     add_header Access-Control-Allow-Headers '*';
  8.     if ($request_method = 'OPTIONS') { # options 预检请求通过了,就可以访问了。
  9.         add_header 'Access-Control-Allow-Credentials' 'true';
  10.         add_header 'Access-Control-Allow-Origin' $http_origin;
  11.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  12.         add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
  13.         add_header 'Access-Control-Max-Age' 1728000;
  14.         add_header 'Content-Type' 'text/plain; charset=utf-8';
  15.         add_header 'Content-Length' 0;
  16.         return 204;
  17.     }
  18. }
复制代码

  • 修改后端服务

    • 配置 @ CrossOrigin 注解

  1. @CrossOrigin(origins = {"http://你想支持跨域的域名"}, allowCreadentials = "true")
  2. public class UserController {
  4.    
  5. }
复制代码
b.  添加 web全局请求拦截器
  1. @Configuration
  2. public class WebMvcConfg implements WebMvcConfigurer {
  4.     @Override
  5.     public void addCorsMappings(CorsRegistry registry) {
  6.         //设置允许跨域的路径
  7.         registry.addMapping("/**")
  8.                 //设置允许跨域请求的域名
  9.                 //当 **Credentials为true时，** Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
  10.                 .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
  11.                 //是否允许证书 不再默认开启
  12.                 .allowCredentials(true)
  13.                 //设置允许的方法
  14.                 .allowedMethods("*")
  15.                 //跨域允许时间
  16.                 .maxAge(3600);
  17.     }
  18. }
复制代码
c. 定义新的 corsFilter Bean，参考：https://www.jianshu.com/p/b02099a435bd
补充：SpringBoot设置Cors跨域的四种方式

前言：CorsFilter / WebMvcConfigurer / @CrossOrigin 需要SpringMVC 4.2 以上的版本才支持，对应SpringBoot 1.3 版本以上都支持这些CORS特性。不过，使用SpringMVC4.2 以下版本的小伙伴也不用慌，直接使用方式4通过手工添加响应头来授权CORS跨域访问也是可以的。
链接：https://www.jianshu.com/p/b02099a435bd
首先一点：跨域问题，后端解决，有如下四种方式。
方式1：返回新的CorsFilter
  1. @Configuration
  2. public class CorsConfig {
  3.     private CorsConfiguration buildConfig() {
  4.         CorsConfiguration corsConfiguration = new CorsConfiguration();
  5.         corsConfiguration.addAllowedOrigin("*");
  6.         corsConfiguration.addAllowedHeader("*");
  7.         corsConfiguration.addAllowedMethod("*");
  8.         corsConfiguration.setMaxAge(3600L);
  9.         corsConfiguration.setAllowCredentials(true);
  10.         return corsConfiguration;
  11.     }
  13.     @Bean
  14.     public CorsFilter corsFilter() {
  15.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  16.         source.registerCorsConfiguration("/**", buildConfig());
  17.         return new CorsFilter(source);
  18.     }
  19. }
复制代码
方式2：重写WebMvcConfigurer
  1. @Configuration
  2. public class WebMvcConfg implements WebMvcConfigurer {
  4.     @Override
  5.     public void addCorsMappings(CorsRegistry registry) {
  6.         //设置允许跨域的路径
  7.         registry.addMapping("/**")
  8.                 //设置允许跨域请求的域名
  9.                 //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
  10.                 .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
  11.                 //是否允许证书 不再默认开启
  12.                 .allowCredentials(true)
  13.                 //设置允许的方法
  14.                 .allowedMethods("*")
  15.                 //跨域允许时间
  16.                 .maxAge(3600);
  17.     }
  18. }
复制代码
方式3：使用注解（@CrossOrigin）
  1. @Controller
  2. @RequestMapping("/admin/sysLog")
  3. @CrossOrigin
  4. public class SysLogController {
  6. }
复制代码
方式4：手工设置响应头（HttpServletResponse ）

这种方式，可以自己手工加到，具体的controller，inteceptor，filter等逻辑里。
  1. @RequestMapping("/test")
  2. @ResponseBody
  3. public String test(){
  4. response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
  5. return "success";
  6. }
复制代码
总结：以上是设置cors跨域后端解决的四种方式，本质都是类似最后一种设置响应头，不过都是各自包实现了不同的封装逻辑。
最后：

“在这个最后的篇章中，我要表达我对每一位读者的感激之情。你们的关注和回复是我创作的动力源泉，我从你们身上吸取了无尽的灵感与勇气。我会将你们的鼓励留在心底，继续在其他的领域奋斗。感谢你们，我们总会在某个时刻再次相遇。”
5.gif


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
端木茵茵
昨天 08:11

0

粉丝关注

17

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫