阿里云服务器 SSH远程连接 前后端分离项目 Nginx部署 + 域名配置微信小程序webview内嵌 （Vue+SpringBoot）

工具安装

安装 XShell 和 XFtp 进行 ssh 远程连接

家庭/学校免费 - NetSarang Website

如下图配置完成，连接进行云服务器

Nginx配置

在XShell 控制台输入命令，有两种安装方式

直接下载拉取

dnf update  # 更新
yum list available nginx  # 查看版本

如图，最新版本1.20.1 版本较低，故考虑上传安装包解压

手动下载安装

• nginx：下载下载最新稳定版，这里选择1.28
• 在 XFtp 进行上传，选择目录 /usr/local/src/nginx

1. 安装nginx之前需要先安装依赖

yum install gcc
yum install pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel

2. 进入目录 解压安装包

cd /usr/local/src/nginx
tar -xvf nginx-1.13.7.tar.gz  

3. 配置安装

   进入安装目录，编译安装 默认安装在 /usr/local/nginx

ls  # 查看目录，目录为：nginx-1.28.0
cd nginx-1.28.0       
./configure     #执行配置
make && make install

4. 进入安装目录查看版本，启动nginx

   启动命令./nginx

/usr/local/nginx/sbin/nginx -v  # 查看版本

cd /usr/local/nginx/sbin        # 进入nginx安装目录
./nginx          

此时直接访问 IP，默认80端口，出现 Welcome to nginx 则安装启动成功

若仍然无法访问，需要在云服务器中配置安全组，放开 80 端口

如图，示例腾讯云服务器 防火墙添加规则

配置

在 XFtp 或 XShell 进入nginx安装目录 /usr/local/nginx

打开 conf/nginx.conf 文件进行配置

在server下添加配置

location / 配置前端项目位置

location /api 是请求路径包含 api 时直接转发代理 到后端 8025 端口

http {
    server {
        location / {
            root   /home/shaoWeChat/frontend/dist;
            index  index.html index.htm;            
	    	# 支持直接访问子路径
            try_files $uri $uri/ /index.html;
        }

        location /api {
                proxy_pass http://localhost:8025/api;
        }

若使用命令行 vim 编辑

vim /usr/local/nginx/conf/nginx.conf

按下 ESC 键
1、输入 :wq 保存并退出
2、输入 :q! 取消保存

配置完成

./nginx -t 			# 测试配置文件
./nginx -s reload 	# 重启Nginx

前端打包上传

前端将项目打包成 dist 上传到对应位置，我这里是 /home/shaoWeChat/frontend/

前端我使用的是vite构建vue项目，执行打包命令

vite build

注意：前端打包前，请求后端地址需要修改为 http://云服务器公网IP:端口

前端项目是运行在客户浏览器环境下的，使用的网络是客户自己电脑的网络

如果前端请求localhost就相当于请求客户自己电脑，而客户自己的电脑上并没有后端代码，后端代码在服务器上，那么axios在请求的时候，就必须请求指定的域名或者ip，否则无法请求到后端的接口

到这里，访问 Ip 就可以加载页面了，只是没有后端数据

后端

JDK安装

同理，手动上传，我选择jdk1.8，上传在 /usr/java 目录 Java Downloads | Oracle 中国

tar zvxf jdk-8u451-linux-x64.tar.gz -C /usr/java

修改 java 全局配置

# 修改环境配置文件
vi /etc/profile

# 编辑配置文件，在里面添加如下三行
export JAVA_HOME=/usr/java/jdk1.8.0_451
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar

# 使环境变量生效
source /etc/profile

# 验证是否配置成功，查看java版本
java -version

修改完成按下 ESC 键
1、输入 :wq 保存并退出
2、输入 :q! 取消保存

Spring上传运行

1. 后端 SpringBoot 项目将 application.yml 修改为开发环境 prod

   spring:
     # 默认 dev 环境
     profiles:
       active: prod
   

   新建 application-prod.yml 配置线上端口号 以及 一些不可公开的配置，会直接覆盖原文件的项目配置

   server:
     port: 8025
   # 其余匹配配置
   

   需要在根目录的 .gitignore 配置 git 屏蔽，不会上传到云端

   /src/main/resources/application-prod.yml
   

2. 执行 Maven 栏的 Package 打包为 jar 包

   将 target 目录下的 jar 包上传到 服务器

3. 进入项目目录 执行命令

   执行以下命令 关闭控制台时 项目会自动关闭

   java -jar xxx.jar
   

   执行以下命令关闭控制台 仍然运行

   nohup java -jar xxx.jar &
   
   nohup java -jar xxx.jar >msg.log 2>&1 &  # 将标准输出的日志重定向至文件msg.log
   

4. 重新部署

   ps -ef|grep java  # 查找进程
   

   kill -9 进程号     # 杀死进程
   

配置域名ssl

1. 将ssl证书上传到 nginx/config 目录下
   
2. 更新 nginx.conf 文件更新配置 （将原来的server内容替换)
   需要替换域名 和 ssl证书名称
   注意：ssl_protocols配置需禁用旧协议，否则可能报错ERR_SSL_PROTOCOL_ERROR

   # 直接访问 https 
   server
   {
       charset utf8;
       listen 443;
       server_name www.xxx;
       ssl_certificate xxxx.pem;
       ssl_certificate_key xxx.key;
       ssl_session_timeout 5m;
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  
       # 禁用旧协议!
       # 否则会出现 ERR_SSL_PROTOCOL_ERROR 证书错误
       ssl_protocols TLSv1.2 TLSv1.3;  
       ssl_prefer_server_ciphers on;
       
       
       location / {
           root   /home/shaoguanWeChat/frontend/dist;
           index  index.html index.htm;            
       # 支持直接访问子路径
           try_files $uri $uri/ /index.html;
       }
   
       location /api {
           proxy_pass http://localhost:8025/api;
       }
   }
   
   # http 跳转 https
   server 
   {
       listen 80;
       server_name qj121.cn;
       rewrite ^/(.*) https://www.xxx.cn permanent;
   }
   

3. 配置完成 访问域名 报错
   

ping 命令也无法ping域名
可能是没有配置域名解析，在阿里云或腾讯云域名管理中配置域名解析 到 服务器IP即可

微信小程序webview

1. 登录 微信公众平台
   在开发管理中找到 业务域名，进行配置
   

2. 点击下载 校验文件
   

3. 将校验文件 放在前端部署 的dist目录下即可
   访问 域名/校验文件.txt 能够支持访问，则配置成功

4. uniapp webview 内嵌

   <template>
     <view class="content">
       <view style="width: 100%; height: 100%;">
         <web-view v-if="url" :src="url"></web-view>
       </view>
   
     </view>
   </template>
   
   <script setup lang="ts">
   import { ref } from 'vue'
   const title = ref('Hello')
   
   const url = ref('https://www.xxxxx.cn/realtime');
   </script>
   

启动微信开发者工具，正常运行页面 即可发布