物流网站建设规划总结,网贷代理平台,门户网站开发分类,京东商城网站建设目的一、多环境
参考文章#xff1a;https://blog.csdn.net/weixin_41701290/article/details/120173283
本地开发#xff1a;localhost#xff08;127.0.0.1#xff09;
多环境#xff1a;指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。…一、多环境
参考文章https://blog.csdn.net/weixin_41701290/article/details/120173283
本地开发localhost127.0.0.1
多环境指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。
为什么需要 每个环境互不影响 区分不同的阶段开发 / 测试 / 生产 对项目进行优化 a.本地日志级别 b.精简依赖节省项目体积 c.项目的环境 / 参数可以调整比如 JVM 参数
针对不同环境做不同的事情。
多环境分类
本地环境自己的电脑localhost开发环境远程开发大家连同一台机器为了大家开发方便测试环境测试开发 / 测试 / 产品单元测试 / 性能测试 / 功能测试 / 系统集成测试独立的数据库、独立的服务器预发布环境体验服和正式环境一致正式数据库更严谨查出更多问题正式环境线上公开对外访问的项目尽量不要改动保证上线前的代码是 “完美” 运行沙箱环境实验环境为了做实验
前端多环境实战
请求地址 ○ 开发环境localhost:8000 ○ 线上环境user-backend.Drbearxx.cn
用了 umi 框架build 时会自动传入 NODE_ENV production 参数start NODE_ENV 参数为 development 》启动方式 开发环境npm run start本地启动监听端口、自动更新 线上环境npm run build项目构建打包可以使用 serve 工具启动npm i -g serve
》项目的配置
不同的项目框架都有不同的配置文件umi 的配置文件是 config可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档https://umijs.org/zh-CN/docs/deployment
开发环境config.dev.ts生产环境config.prod.ts公共配置config.ts 不带后缀
后端多环境实战
SpringBoot 项目通过 application.yml 添加不同的后缀来区分配置文件
可以在启动项目时传入环境变量
java -jar .\user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod主要是改
● 依赖的环境地址 ○ 数据库地址 ○ 缓存地址 ○ 消息队列地址 ○ 项目端口号 ● 服务器配置
二、项目部署
参考文章https://www.bilibili.com/read/cv16179200
需要 Linux 服务器建议大家用 CentOS 8 / 7.6 以上
一原始部署
什么都自己装
前端
需要 web 服务器nginx 、apache、tomcat
安装 nginx 服务器
1.用系统自带的软件包管理器快速安装比如 centos 的 yum 2.自己到官网安装参考文章
curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gztar -zxvf nginx-1.21.6.tar.gzcd nginx-1.21.637 2022-04-17 23:30:09 yum install pcre pcre-devel -y39 2022-04-17 23:30:59 yum install openssl openssl-devel -y41 2022-04-17 23:31:57 ./configure --with-http_ssl_module --with-http_v2_module --with-stream42 2022-04-17 23:32:13 make43 2022-04-17 23:32:54 make install48 2022-04-17 23:33:40 ls /usr/local/nginx/sbin/nginxvim /etc/profile在最后一行添加export PATH$PATH:/usr/local/nginx/sbin nginxnetstat -ntlp 查看启动情况注意 nginx 权限
后端
java、maven
yum install -y java-1.8.0-openjdk*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.gzgit clone xxx 下载代码打包构建跳过测试
mvn package -DskipTestsjava -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod二宝塔Linux部署
宝塔 Linux 部署
Linux 运维面板
官方安装教程https://www.bt.cn/new/download.html
方便管理服务器、方便安装软件
三前端托管
前端腾讯云 web 应用托管比容器化更傻瓜式不需要自己写构建应用的命令就能启动前端项目 https://console.cloud.tencent.com/webify/new ●小缺点需要将代码放到代码托管平台上 ●优势不用写命令、代码更新时自动构建
四Docker部署
docker 是容器可以将项目的环境比如 java、nginx和项目的代码一起打包成镜像所有同学都能下载镜像更容易分发和移植。
再启动项目时不需要敲一大堆命令而是直接下载镜像、启动镜像就可以了。
docker 可以理解为软件安装包。
Docker 安装https://www.docker.com/get-started/ 或者宝塔安装
Dockerfile 用于指定构建 Docker 镜像的方法
Dockerfile 一般情况下不需要完全从 0 自己写建议去 github、gitee 等托管平台参考同类项目比如 springboot
Dockerfile 编写
FROM 依赖的基础镜像WORKDIR 工作目录COPY 从本机复制文件RUN 执行命令CMD / ENTRYPOINT附加额外参数指定运行容器时默认执行的命令
根据 Dockerfile 构建镜像
# 后端
docker build -t user-center-backend:v0.0.1 .# 前端
docker build -t user-center-front:v0.0.1 .Docker 构建优化减少尺寸、减少构建时间比如多阶段构建可以丢弃之前阶段不需要的内容
docker run 启动
# 前端
docker run -p 80:80 -d user-center-frontend:v0.0.1# 后端
docker run -p 8080:8080 user-center-backend:v0.0.1虚拟化
1端口映射把本机的资源实际访问地址和容器内部的资源应用启动端口进行关联 2目录映射把本机的端口和容器应用的端口进行关联
进入容器
docker exec -i -t fee2bbb7c9ee /bin/bash查看进程
docker ps查看日志
docker logs -f [container-id]杀死容器
docker kill强制删除镜像
docker rmi -f五Docker平台部署
1云服务商的容器平台腾讯云、阿里云 2面向某个领域的容器平台前端 / 后端微信云托管要花钱
容器平台的好处
1不用输命令来操作更方便省事 2不用在控制台操作更傻瓜式、更简单 3大厂运维比自己运维更省心 4额外的能力比如监控、告警、其他存储、负载均衡、自动扩缩容、流水线
爽就完事了
三、绑定域名
前端项目访问流程用户输入网址 域名解析服务器把网址解析为 ip 地址 / 交给其他的域名解析服务 服务器 防火墙 nginx 接收请求找到对应的文件返回文件给前端 前端加载文件到浏览器中js、css 渲染页面
后端项目访问流程用户输入网址 域名解析服务器 服务器 nginx 接收请求 后端项目比如 8080端口
nginx 反向代理的作用替服务器接收请求转发请求
四、跨域解决问题
浏览器为了用户的安全仅允许向 同域名、同端口 的服务器发送请求。
如何解决跨域
最直接的方式把域名、端口改成相同的
添加跨域头
让服务器告诉浏览器允许跨域返回 cross-origin-allow 响应头
1. 网关支持Nginx
# 跨域配置
location ^~ /api/ {proxy_pass http://127.0.0.1:8080/api/;add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Methods GET, POST, OPTIONS;add_header Access-Control-Allow-Headers *;if ($request_method OPTIONS) {add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Allow-Methods GET, POST, OPTIONS;add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range;add_header Access-Control-Max-Age 1728000;add_header Content-Type text/plain; charsetutf-8;add_header Content-Length 0;return 204;}
}2. 修改后端服务
配置 CrossOrigin 注解添加 web 全局请求拦截器
Configuration
public class WebMvcConfg implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {//设置允许跨域的路径registry.addMapping(/**)//设置允许跨域请求的域名//当**Credentials为true时**Origin不能为星号需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】.allowedOrigins(http://localhost:9527, http://127.0.0.1:9527, http://127.0.0.1:8082, http://127.0.0.1:8083)//是否允许证书 不再默认开启.allowCredentials(true)//设置允许的方法.allowedMethods(*)//跨域允许时间.maxAge(3600);}
}3 定义新的 corsFilter Bean参考https://www.jianshu.com/p/b02099a435bd
