Nginx本地部署&Linux部署

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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值