Nginx本地部署&Linux部署
1.需求
终极目标是:云服务器Linux部署
要达到这个目标,先在Windows系统本地部署一下,熟悉一下Nginx的配置
1)项目部署需要做什么?【搭建项目运行的环境】
2)Nginx部署前端项目;
3)Nginx配置虚拟主机;
4)Nginx配置反向代理;
5)Nginx配置后端项目集群;
2.项目部署
2.1.需要做什么?
- 后端项目打成jar包
- 前端项目部署:Nginx
- 部署前台系统前端项目
- 部署后台管理系统前端项目
2.2.Nginx简介
Nginx是一款非常流行的静态资源服务器, 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。
特点:
- 稳定性高、高性能
- 丰富的功能集
- 详细的示例配置文件和开发文档
- 系统资源的消耗低
- 支持反向代理:解决跨域问题
- 并发量超高
- Tomcat7的并发量2000左右
- Tomcat8的并发量3000左右
- Nginx的并发量30000左右
2.3.Nginx安装
nginx-1.12.2.zip非常小,绿色版,解压即安装成功!
注意:解压安装的目录路径不要用中文、空格、特殊字符(基本常识)
直接双击nginx.exe,会闪退,但是打开任务管理器,查看进程能够找到nginx
直接在浏览器中访问:http://localhost nginx默认的端口号就是80
2.4.部署前台系统项目
由于我们前台系统项目本身就是一个纯静态html资源项目,所以直接将其文件夹复制过来即可,与html平级或者直接放在html目录之内都行!
由于Nginx的默认静态资源根目录是html目录,所以需要去修改一下配置文件:
只需要修改根目录路径即可!!!!!
server {
listen 80; #监听的端口号
server_name localhost; #主机地址
location / {
root pethome-web; # 项目上下文/所指向的项目根目录路径,以nginx目录作为相对路径
index index.html index.htm; # 欢迎页面
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
修改配置以后,一定要记得重启或者重新加载nginx:
nginx.exe -s reload
2.5.部署后台管理系统项目
由于台管理系统项目是一个基于Vue和ElementUI的组件项目,需要通过webpack打包成静态资源再部署!
npm run build
打包之后,会在当前项目目录下生成一个dist目录(包含静态资源:static目录和一个index.html)
只需要将dist目录复制到nginx目录下,重命名为pethome-admin,也与html目录平级,添加配置:
server {
listen 8081; #监听的端口号
server_name localhost; #主机地址
location / {
root pethome-admin; # 项目上下文/所指向的项目根目录路径,以nginx目录作为相对路径
index index.html index.htm; # 欢迎页面
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
访问之后发现有些js、css、字体文件报404错误:
原因是打包的配置文件(config/index.js第10行)中缺少项目上下文,改成/:
assetsPublicPath: '/',
2.6.配置虚拟主机
疑问:假如我们想让访问前台项目和后台项目都使用80端口,怎么办?
两个程序不能占有同一个端口,但是Nginx支持虚拟主机配置:其实就是配置一个虚拟的域名
相当于将主机地址配置成了域名,但是要让这些域名生效,就必须修改本机的hosts文件:
127.0.0.1 bugtracker.itsource.cn
127.0.0.1 www.pethome.com
127.0.0.1 admin.pethome.com
2.7.部署后端项目
后端项目中解决跨域
config.addAllowedOrigin("http://www.pethome.com");
config.addAllowedOrigin("http://admin.pethome.com");
2.8.配置反向代理
现在我们两个前端项目发送axios的请求时,仍然使用的地址是
axios.defaults.baseURL='http://localhost:8080'
如果后端项目也想使用80端口,怎么办?
1)正向代理
正向代理:是目标服务器的代理,访问者明确的知道目标服务器是谁!
2)反向代理
反向代理:是访问者的代理,起到中转的作用,访问者不知道目标服务器是谁!
3)反向代理配置
proxy_pass 就表示反向代理
hosts文件添加配置
127.0.0.1 bugtracker.itsource.cn
127.0.0.1 www.pethome.com
127.0.0.1 admin.pethome.com
127.0.0.1 api.pethome.com
修改两个前端项目的axios请求的访问地址、fastdfs文件上传的地址:
axios.defaults.baseURL='http://api.pethome.com'
4)反向代理解决跨域问题
server {
listen 80; #监听的端口号
server_name api.pethome.com; #主机地址
location / {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE,PUT,OPTIONS,PATCH';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,userToken,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE,PUT,OPTIONS,PATCH';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,userToken,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 5;
proxy_pass http://localhost:8080; #反向代理配置
}
}
Nginx反向代理中添加了解决跨域问题的配置以后,出现错误:
原因:是Nginx添加了解决跨域问题的配置,而我们后端项目中也有解决跨域问题的配置,重复添加了两次响应头
解决:只需要将我们后端项目中的解决跨域问题的全局过滤器@Configuration注解注释掉即可!
2.9.Nginx访问集群的后端项目
1)先添加打包插件
<build>
<plugins>
<!-- 将SpringBoot项目打成jar包的插件 -->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
2)打包
打包之前先将项目端口修改成8082,再打包
打包之前注意:将后端项目pom.xml中的packaging标签的值修改成jar,原来是pom,若没有此标签就加上:
<packaging>jar</packaging>
mvn clean package -Dmaven.test.skip=true
打包之后,将会项目根目录下的target目录下生成项目的jar包:
jar包文件名称:artifactId-version.jar
使用cmd启动项目:
java -jar pethome.........jar
3)再将项目端口改回8080,再IDEA中直接启动一份后端项目
这样就形成了8080和8082两份后端项目,就形成了集群!
4)Nginx配置后端项目集群
Nginx配置集群及负载均衡策略:https://www.cnblogs.com/diantong/p/11208508.html
# Nginx配置后端项目的集群 pethome-cluster表示后端项目集群的名称
# Nginx会自动负载均衡去访问后端项目接口
upstream pethome-cluster {
server localhost:8080;
server localhost:8082;
}
反向代理中使用集群名称:
proxy_pass http://pethome-cluster; # 使用后端项目集群的名称
负载均衡策略:
- 轮询(默认):平均分配请求
- 权重(weight):按照比例分配
3.Linux部署
3.1.购买云服务器
云服务器-》点击名称-》安全组-》入方向规则对以下端口放行:
- 80:nginx
- 22:xshell远程命令窗口连接
- 443:SVN服务器
- 2375:docker服务
- 3306:mysql
- 6379:redis
- 8080:后端项目的
- 8082:后端项目的
- 22122:fastdfs的
- 23000:fastdfs的
3.2.安装环境
建议使用OneInStack一键式安装:
wget -c http://mirrors.linuxeye.com/oneinstack-full.tar.gz && tar xzf oneinstack-full.tar.gz && ./oneinstack/install.sh --nginx_option 1 --tomcat_option 2 --jdk_option 2 --db_option 2 --dbinstallmethod 2 --dbrootpwd 123456 --redis --reboot
3.3.xshell远程连接云服务器
略
3.4.检查环境是否安装好
1)检查jdk
java
javac
java -version
2)检查redis
service redis-server status
3)检查nginx
service nginx status
http://94.74.99.141/
4)检查mysql
service mysqld status
service mysql status
3.5.部署MySQL
虽然mysql已经安装,也已经启动服务,云服务器安全组中也开放了3306端口,但是仍然无法远程连接:
1)开启MySQL远程连接权限
先在xshell中本地登录mysql
mysql -u root -p
输入密码
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456';
flush privileges;
2)设置不区分大小写
Linux系统中安装MySQL之后,它默认是严格区分大小写的,尤其是表名称和列名称,我们需要把它设置成不区分大小写
在xshell中使用vi或者vim编辑器:
vim /etc/my.cnf
找到[mysqld],在下面添加,注意最前面不能有空格:
按字母 i 表示进入编辑状态:
lower_case_table_names=1
按ESC表示退出编辑状态,
再按 :wq 表示写入并退出vim编辑器
重启mysql服务
service 服务名称 操作
systemctl 操作 服务名称
service mysqld restart
systemctl restart mysqld
3)查看mysql字符集
先在xshell中登录mysql
mysql -u root -p
输入密码
show variables like '%character%';
4)导入数据
略
3.6.部署Redis
只需要修改配置文件中的 requirepass 密码改成123456
使用vi或者vim编辑器打开redis的配置文件
vim /usr/local/redis/etc/redis.conf
按 :/requirepass 表示查找
按 n 表示找下一个
按 i 表示进入编辑状态
去掉前面的#和空格
重启redis服务
service redis-server restart
systemctl restart redis-server
可以在任意路径下执行redis客户端命令:
redis-cli
3.7.部署后端项目
1)项目打包
mvn clean package -Dmaven.test.skip=true
2)使用xftp工具上传 /root目录下
3)执行命令启动项目
java -jar pethome.......jar
启动失败: javax.net.ssl.SSLException: closing inbound before receiving peer’s close_notify
原因:Linux环境下,java连接mysql的时候默认使用ssl安全协议连接,但是找不到对应SSL安全令牌,我们需要关闭ssl连接
解决:修改application.yml配置里面的数据源连接的url,在最后面添加 &useSSL=false
后台进程启动:
刚才那样启动后端项目,会占用xshell进程,若你想执行其他命令,只能按Ctrl+C退出,一旦这样退出后,那么后端项目也强制性停止运行了!
所以我们必须采用后台进程方式启动后端项目:
nohup java -jar pethome-1.0-SNAPSHOT.jar > pethome.log 2>&1 &
后面的 > pethome.log 2>&1 & 表示后台进程启动时,将日志信息输出到当前目录的pethome.log中,你可以下载此日志文件去查看日志记录,进行排查错误!
3.8.部署前台项目
1)修改js/common.js
axios.defaults.baseURL='http://94.74.99.141:8000'
2)上传pethome-web文件夹到/data/wwwroot目录下
3)上传nginx.conf配置文件
server {
listen 80;
server_name 94.74.99.141;
location / {
root /data/wwwroot/pethome-web;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 8081;
server_name 94.74.99.141;
location / {
root /data/wwwroot/pethome-admin;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 8000;
server_name 94.74.99.141;
location / {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE,PUT,OPTIONS,PATCH';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,userToken,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE,PUT,OPTIONS,PATCH';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,userToken,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 5;
proxy_pass http://127.0.0.1:8080;
}
}
注意修改每一个server里面的端口、主机ip、root根目录路径、以及反向代理到的后端项目地址
4)重启nginx
/usr/local/nginx/sbin/nginx -s reload
3.9.部署后台前端项目
1)修改src/main.js
axios.defaults.baseURL='http://94.74.99.141:8000'
2)重新打包
npm run build
3)上传到/data/wwwroot/pethome-admin目录下
4)重启nginx
/usr/local/nginx/sbin/nginx -s reload
如果启动失败,就杀死nginx进程
先查看进程
ps -ef | grep nginx
kill -9 进程id
/usr/local/nginx/sbin/nginx
3.10.域名解析
在华为云上面购买域名的时候,其实我们买的是一级域名和二级域名
顶级域名:.com .cn .org .net .xyz .top .中国 .我爱你
二级域名:自己输入 比如 baidu 163 jd qq taobao
一旦我们选定了二级域名和顶级域名之后,可以任意添加三级域名:比如www、admin、api、map、music、sport、game。。。。。。。。
例如:map.baidu.com、music.baidu.com、tieba.baidu.com、wenku.baidu.com、baike.baidu.com、fanyi.baidu.com、v.qq.com、www.youku.com
购买一个二级域名和顶级域名之后,可以添加500个三级域名!!!!
1)添加三级域名
2)修改nginx的配置,并上传配置文件
- 前台项目
- listen 80
- server_name www.pet-home.xyz
- 后台项目
- listen 80
- server_name admin.pet-home.xyz
- 反向代理
- listen 80
- server_name api.pet-home.xyz
3)修改前台和后台前端项目的axios的baseURL
axios.defaults.baseURL='http://api.pet-home.xyz'
重新打包上传
4)后端项目修改
支付宝支付的常量类中的异步通知和同步通知的地址:
// 服务器异步通知页面路径 需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问
public static String notify_url = "http://api.pet-home.xyz/alipay/notify";
// 页面跳转同步通知页面路径 需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问
public static String return_url = "http://www.pet-home.xyz/success.html";
重新打包,重新上传,重新启动
5)nginx重新加载
/usr/local/nginx/sbin/nginx -s reload