作文网站排行榜前十名,企业样本设计公司,网页截图快捷键ctrl,常州个人网站建设部署
参考文章#xff1a;如何部署网站#xff1f;来比比谁的方法多 - 哔哩哔哩大家好#xff0c;我是鱼皮#xff0c;不知道朋友们有没有试着部署过自己开发的网站呢#xff1f;其实部署网站非常简单#xff0c;而且有非常多的花样。这篇文章就给大家分享几种主流的前端…部署
参考文章如何部署网站来比比谁的方法多 - 哔哩哔哩大家好我是鱼皮不知道朋友们有没有试着部署过自己开发的网站呢其实部署网站非常简单而且有非常多的花样。这篇文章就给大家分享几种主流的前端 / 后端项目部署方式吧前端部署对于前端项目打包之后往往是一个目录目录中包含 index.html入口文件、css、js 等等。那么我们要做的事情其实就是想办法 让用户访问到这些文件 包含两个关键的问题文件存放到哪里怎么提供文件访问能力围绕这两个问题常见的部署方式有以下五种。1. web 服务器将文件放到远程服务器上没有服务器也可以在自https://www.bilibili.com/read/cv16179200
需要Linux服务器建议使用(CentOs8 7.6以上)
多环境
多环境值同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上测试 开发 生产等不同环境
本地开发localhost127.0.0.1
参考文章多环境设计_程序员鱼皮的博客-CSDN博客3 分钟学会企业开发中的多环境知识大家好我是鱼皮今天给大家分享企业项目开发的重要知识 —— 多环境。本文大纲什么是多环境先思考一个问题。假如我们有一个数百万用户正在用的网站网页文件部署在几台服务器上。那现在我们要开发上线一个新功能应该怎么做呢老弟小阿巴问写好代码后直接更新服务器上的网页文件么我一巴掌抽过去那万一你的代码有 Bug不就影响到线上用户的使用了么老弟思考了下那写好代码后在本地测试运行没有问题后再发布上线我思路不错但问题在于如果本地._多环境设计https://blog.csdn.net/weixin_41701290/article/details/120173283
为什么需要多环境 每个环境互不影响 为了区分不同阶段/开发/测试 对项目进行优化 本地日志级别 精简依赖节省项目体积 项目的环境/参数可以调整比如Jvm参数 针对不同环境做同的事
多环境分类 本地环境自己的电脑 localhost 开发环境远程开发大家连同一台机器为了大家方便 测试环境测试 开发/测试/产品 单元测试/性能开发/功能测试/系统集成测试独立的数据库独立的服务器 预发布环境体验服和正式环境一致 正式环境线上公开对外访问的项目尽量不要改动保证上线前的代码是完美运行的 沙箱环境实验环境为了做实验
前端多环境实战 请求环境 开发环境:localhost:xxxx 线上环境XXX.com 怎么让前端运行的时候知道是哪个环境呢 使用函数
startFront(env){if(env prod){//不输出注释//项目优化//修改请求地址}else{//保持本地开发逻辑}
}
用了Umi框架bulid的时候会自动传入NODE_ENVproduction参数start 启动方式npm run start 本地启动监听端口自动更新 线上环境npm run build项目构建打包可以使用server工具启动在node.js终端进行安装命令npm install --global serve 因为封装了全局返回对象所以在里面设置对应的连接地址 将图片中的http://user.backend.code.nav.cn换成自己的前端地址
项目的配置
不同的项目框架都有不同的配置文件umi 的配置文件是 config可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档https://umijs.org/zh-CN/docs/deploymenthttps://umijs.org/zh-CN/docs/deployment 开发环境config.dev.ts 生产环境config.prod.ts 公共配置config.ts 不带后缀
后端环境
在resource目录中添加生产环境的yaml配置文件
格式为application-prod.yaml在这个文件中配置生产环境的配置其余配置不变主要是数据库的地址
后端主要配置 依赖的环境地址 数据库地址 缓存地址 消息队列地址 项目端口号 服务器配置
项目运行测试 可以在启动时传入环境变量 上线项目时需要使用maven工具对项目进行打包在到包的时候会自动运行测试类如果测试类中的某个测试方法不通过的话就会报错这时候可以选择点击maven工具上的一个标志禁用测试类不推荐)
项目打包
运行maven的工具package进行打包
在控制台运行
执行生产环境的配置 这里有乱码问题 解决方式(windows系统控制台运行SpringBoot jar包显示中文乱码的解决方案_springboot jar 乱码_学海无涯行者无疆的博客-CSDN博客chcp 65001 java -jar platform-core-1.0.0.jar 这里日志显示是在prod环境下运行的
Linux系统下Mysql安装 使用宝塔面板进行安装官方教程宝塔面板下载免费全能的服务器运维软件宝塔面板,近200个免费应用提供使用如网站管理、系统安全、系统监控、计划任务、文件管理、软件管理、一键部署等https://www.bt.cn/new/download.html 开发宝塔需要开方的端口在云服务器安全组策略中开发端口 【如果是华为云】 也可以执行在线安装 安装成功后会自动显示初始化密码和用户名进入更改 安装完成后注册宝塔账号并登录 修改账号和密码 在宝塔面板的软件商店中下载对应版本的mysql下载完成后启动 点击左侧导航栏的数据库 最后使用Navcate连接远程数据库 输入刚刚创建数据库填入的用户名和密码连接 在远程连接工具中进入MySQL客户端 执行SQL语句 use mysql;
-- 查看MySQL数据库编码方式
show variables like character%;
-- 如果数据库默认编码不是utf-8
-- 修改这些
SET character_set_client utf8 ;
SET character_set_connection utf8 ;
SET character_set_database utf8 ;
Mysql修改密码安全策略方法Mysql修改密码安全策略方法临时修改和永久修改方法_mysql修改密码策略_星辰_218的博客-CSDN博客Mysql修改密码安全策略方法临时修改和永久修改方法_mysql修改密码策略https://blog.csdn.net/Code_is_a_swhite/article/details/130250394
以下是星球中小伙伴手动安装mysql的某些操作 手动安装是在是太麻烦了还是用宝塔吧 新建用户 安装完成后 进行防火墙配置
开始部署
前端 使用宝塔安装nginx 安装完成后启动nginx 在启动时如果出现Not Found说明需要配置环境变量 输入vim /etc/profile按shift4shiftG跳转到最后一行 输入 重新激活source /etc/profile 重新启动 输入nginx netstat -ntlp查看进程如果有nginx说明启动成功 将前端项目上传到服务器 进入nginx的config目录 先复制一份nginx.config文件 将前端构建出来的文件dist移动到服务器中的一个文件夹中这里是/www/userCenter-front本来所有文件是在dist中的使用mv * ../将他移动到userCenter-front中然后使用rm -rf dist删除dist目录 进入nginx中的config目录修该配置 刷新配置nginx -s reload, 访问自己的服务器的ip即可看到前端页面 问题 宝塔面板无法打开报 nginx Not Found 404 问题 宝塔面板404 Not Found解决方案_灿灿的金的博客-CSDN博客查看全部的网址然后就行了。这是因为没有输入安全的网址。_宝塔面板404https://blog.csdn.net/m0_46495271/article/details/130948376?spm1001.2101.3001.6650.1utm_mediumdistribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-130948376-blog-108024625.235
后端 安装maven
wget https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.tar.gz 为了方便给mvaen配置环境变量 pwd得到当前目录 复制 vim /etc/profile在最后一行添加 刚刚复制的目录 安装jdk 使用宝塔安装tomcat,里面有jdk传递 将后端项目的jar包使用winScp传到服务器的/www/server/userCenter-backend目录下 使用命令启动java -jar ./UserCenter-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod 但是这样启动有问题窗口无法退出 所以使用nohup java -jar ./UserCenter-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod 这个命令 使用jps查看所有已经运行的java程序 如果没有权限 执行chmod ax 你的项目文件 部署完成 打开服务器配置安全组 打开后端项目的端口
宝塔部署
前端
打卡宝塔面板 点击根目录进去选中所有文件删除他的默认文件 然后打开前端构建好的dist,将这个文件夹下的所有文件拖到根目录下 点击上传 然后在浏览器输入ip地址 前端访问成功
后端
将后端的jar包传到宝塔的java项目
停止tomcat服务
修改配置点击保存 项目无法启动 先关闭tomcat服务因为tomcat服务占用了8080端口也可修改项目启动的端口但是修改端口比较麻烦 springboot项目部署宝塔提示成功实际没有启动_关于#springboot项目部署宝塔提示成功,实际没有启动#的问题,如何解决_古木2019的博客-CSDN博客springboot项目部署宝塔提示成功实际没有启动_关于#springboot项目部署宝塔提示成功,实际没有启动#的问题,如何解决https://blog.csdn.net/qq_38188762/article/details/128390864 注意在项目执行命令中使用 java -jar xiangmu.jar --spring.prolifes.activeprod 在项目配置文件中设置线上项目的数据库等配置
在宝塔面板创建数据库给配置文件中配置的是用宝塔面板创建的数据库并且输入设置的用户名和密码 跨域问题
跨域问题解决
浏览器为了用户的安全仅允许向 同域名、同端口 的服务器发送请求。
如何解决跨域
最直接的方式把域名、端口改成相同的
添加跨域头
让服务器告诉浏览器允许跨域返回 cross-origin-allow 响应头
1. 网关支持Nginx
直接将这段代码赋值到前端项目的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 注解 可以添加允许夸域的ip 域名 可以是一个也可以是一个数组 属性origins;允许跨域的域名 ip method允许跨域的方法 RequestMethod.Get RequestMethod.Post…… 在controller上添加这个注解
CrossOrigin(originshttp://xxxx)
RestController
public class UserControler{//项目接口
}
方式二
添加 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);}
}
方式三
定义新的 corsFilter Bean参考SpringBoot设置Cors跨域的四种方式 - 简书前言CorsFilter / WebMvcConfigurer / CrossOrigin 需要SpringMVC 4.2 以上的版本才支持对应SpringBoot 1...https://www.jianshu.com/p/b02099a435bd
至此 使用宝塔的方式已经全部部署完毕可以正常访问 这里记一个踩坑 就是关于前端页面注册跳转的问题 因为是用了Ant Design Pro生成的页面 本来我的注册跳转按钮是使用a标签来超链接到注册页面实现的这样子做在本地运行没有任何问题因为所有资源都是本地的所以不存在什么问题 但是到了线上通过a标签来超链接的话资源是要在网上进行获取的 所以修该为Link 组件跳转完美解决问题 查了一下Link组件和a链接的区别 Docker部署
暂时没做-以后
