用户中心-部署笔记（用的原生部署）

用户中心-部署笔记

常用部署方式三种：

• 原生的部署方式
• 使用宝塔进行部署
• 使用docker容器进行部署

​ 今天晚上时间不是很够了，所以我准备使用宝塔面板直接部署。保证明天项目能正常访问。然后重新学一遍原生的部署模式。

原生部署

1、前端部署

1、安装xshell 使用xshell安装原生的nginx

1. 需要xshell连上当前服务器，图形界面操作，输入你的云服务器网址，并登录

2. 安装nginx服务器：

   1. 使用linux自带的包管理器安装

   2. 自己到官网安装

      curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gz
      
      tar -zxvf nginx-1.21.6.tar.gz
      
      cd nginx-1.21.6
      
         37  2022-04-17 23:30:09 yum install pcre pcre-devel -y
         39  2022-04-17 23:30:59 yum install openssl openssl-devel -y
         41  2022-04-17 23:31:57 ./configure --with-http_ssl_module --with-http_v2_module --with-stream
         42  2022-04-17 23:32:13 make
         43  2022-04-17 23:32:54 make install
         48  2022-04-17 23:33:40 ls /usr/local/nginx/sbin/nginx
         
         # 添加环境变量
         vim /etc/profile
        在最后一行添加：export PATH=$PATH:/usr/local/nginx/sbin	
        
        # 修改了环境变量之后需要重新激活一下文件
        source /etc/profile
        
        
        #启动nginx
        nginx
        
        #查看启动情况
        netstat -ntlp 查看启动情况
      

注意nginx的权限问题

启动成功

参考文档：Linux 源码安装nginx_weixin_46010834的博客-CSDN博客

2、上传打包好的dist前端文件夹

1. 进入nginx的config文件夹，复制一份nginx.conf避免自己改坏

   cp nginx.conf nginx.default.conf
   
   vim nginx.conf
   #修改nginx.conf文件
   
   # nginx make 后生成真正的运行文件路径，把你的配置文件复制过去并覆盖掉
   cp nginx.conf /usr/local/nginx
   
   # 使更新的配置生效，生效后访问网站即可
   nginx -s reload
   
   
   
   # 注意访问权限问题 查看启动进程的详情 
   # 如果是nobody启动的进程，需要nginx.conf中指定的进程开启者
   ps aux | grep xxxxx 
   
   
   

2. 上传dist文件夹，（直接的文件夹可能不能上传，压缩成zip然后上传）

注意打包过后

3、运行

2、后端部署

1、安装java mvn git，这样可以实现在云服务器上拉去代码后打包然后部署

1. 安装java命令

   yum install java-1.8.0-openjdk.x86_64
   
   # 安装完成后，使用以下命令检查数据是否正常
   java -vserion
   

2. 执行java命令直接启动即可

   # （这种方式只能当前session启动）
   sudo java -jar ./usercenter-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod
   
   # 这个命令表示在后台启动
   nohup java -jar ./usercenter-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
    
   #如果访问还有问题需要放开防火墙 在腾讯云配置或者在主机
   firewall-cmd --zone=public --add-port=8080/tcp --permanent
   firewall-cmd --reload
   
   

3、解决跨域

浏览器为了用户的安全，仅允许向 同域名、同端口 的服务器发送请求。如果跨域名或者端口

解决跨域一班有三种通用的办法：

1. 把域名、端口改成相同的（目前我在环境上使用的是同域名的访问模式）

    因为我没有注册域名，所以我把所有的请求都直接通过ip访问，前端请求直接到我当前的 xxx.xxx.xxx/api下的，然后我通过设置反向代理，直接所有api请求定向到当前主机的8080端口的api环境下，等于直接规避的跨域问题，因为我的前端挂载路径和接口访问路径其实都是xxx.xxx.xxx。前端也不再发送optional方法去做模拟请求，所以规避了跨域问题。
   

location /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
}

让服务器告诉浏览器：允许跨域（返回 cross-origin-allow 响应头）

2. 网关支持（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; charset=utf-8';
           add_header 'Content-Length' 0;
           return 204;
       }
   }
   

3. 修改后端服务

   1. 配置 @CrossOrigin 注解

   2. 添加 web 全局请求拦截器

      @Configuration
      public class WebMvcConfg implements WebMvcConfigurer {
       
          @Override
          public 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

linux命令记录：

部署时用到一些linux命令做一下记录

指令	介绍
netstat -nltp | grep 80	查看指定端口80下进程
netstat -nltp	查看所有进程
curl -o filename url	下载路径中文件到当前目录中的 xxx文件
tar -zxvf xxx.tar.gz	解压tar.gz文件
yum list	查看yum已经安装的包
rpm -qa 模块名	检查是否已经安装包
vim:: o	表示插入一行
vim:: shift+g	表示跳转到最后一行
source **	vim修改文件后需要激活一下文件
ps aux | grep xxxxx	查看进程的详情
cp file targetDIr	拷贝文件到目标文件夹下

网址：http://154.8.195.55/user/login
欢迎体验