项目部署（spring+vue）

buffett
102 阅读4分钟

一 项目部署的前期准备

需要准备的东西：

  • 一台服务器
  • 域名
  • 项目代码

步骤：
步骤一 服务器配置

  1. 购买服务器
  2. 实例化
  3. 安装java
  4. 安装nginx
  5. 安装mysql（有条件可以单独使用数据库服务器）

步骤二 域名配置

  1. 域名购买
  2. 实名认证
  3. 域名备案
  4. 域名解析
  5. 配置SSL

步骤三 接口部署

  1. 修改端口
  2. 修改数据库连接
  3. 打包项目代码
  4. 上传代码
  5. 启动服务
  6. 开放端口
  7. 配置nginx

步骤四 前端部署

  1. 修改api地址
  2. 打包
  3. 上传代码
  4. 配置nginx

步骤五 域名访问

  1. 域名解析绑定IP

步骤六 配置HTTPS

  1. 申请SSL证书
  2. 下载证书
  3. 放到服务器nginx
  4. 配置监听443端口
  5. 修改80端口

二 部署准备

配置服务器

1、登陆腾讯云
2、购买服务器

image.png

3、选择官方镜像，系统镜像 ，CentOS 7.6，因为该系统非常适合作为初学者的大家学习Linux。地区可以随意选择。

image.png

4、进入控制台，可以看到刚才的服务器

image.png

5、重置密码后点击登陆

image.png

6、登陆是使用webshell登陆，界面如下。也可以自己下载ssh登陆工具，推荐MobaXterm

image.png

此时就完成服务器的配置

安装nginx

1、下载文件，登陆刚才配置好的服务器

cd /usr/local 
wget http://nginx.org/download/nginx-1.20.0.tar.gz

2、安装依赖

# 安装gcc、gcc-c++ 
yum -y install gcc 
yum -y install gcc-c++ 
# 安装pcre 、zilb 
yum -y install pcre* 
yum -y install zlib* 
# 安装openssl(若需要支持 https 协议) 
yum -y install openssl 
yum -y install openssl-devel

3、解压安装包

tar -zxvf nginx-1.20.0.tar.gz

4、编译准备

./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre

5、安装编译

make && make install

6、启动

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

其他安装

  1. 安装JDK
  2. 安装mysql

配置域名

  1. 注册域名操作，购买地址
  2. 实名认证（审核大概需1-2天）
  3. 域名备案（大概要20天），可以使用手机操作，就是填写一些信息，类型为个人。
  4. 域名解析:主要是把域名与服务器ip绑定
  5. 申请SSL证书：绑定好自己的域名

三 开始部署

服务器启动nginx

  1. 在浏览器上输入如ip：http://110.40.156.213 可以看到访问即可
  2. 如果已经配置好域名，输入域名：ccsu.vip，如果没有访问到，请先域名解析将你的服务器ip与你的域名绑定

服务器启动mysql

  1. 安装完成后，启动mysql，通过本地可以连接

后端部署（Springboot）

  1. 注意mysql的配置
  2. 配置好对应的端口，这里使用8000
  3. 确认好以上两点后，执行打包
mvn clean package -Dmaven.test.skip=true
  1. 上传代码
打包代码丢到服务器自定义目录：`/usr/local/app/`
  1. 启动java服务：
nohup java -jar name.jar > java.opt &
  1. 连接服务器mysql执行数据库脚本
  2. 配置nginx
server {
        listen 80; #监听80端口
        location /ygt/api { 
            proxy_pass http://127.0.0.1:8000/; #转发到8000端口
        }
    }
  1. 重启nginx
浏览器访问http://ccsu.vip/api/queryUserList 接口返回数据，即部署完成。

前端项目部署（vue）

  1. 配置好项目
在项目中把api请求地址改为刚才后端部署的地址，重启看请求是否正常（如果有跨域问题，需要先解决跨域）
  1. 项目打包
npm run build
  1. 上传代码到服务器
执行成功后有一个**dist**文件，将**dist**里面的所有文件丢到服务器 **/app/** 目录下（目录可以自己选） `cd /app`能看到index.html即可
  1. 配置nginx
   server {
      listen 80;  #监听地址
      location / {
         root /app/; #前端代码存放地址
         index index.html index.html;  #入口文件
      }
   }
  1. 重启nginx，访问ccsu.vip系统正常

配置成https

  1. 安装ssl证书
根据教程，把证书下载下来，丢到nginx目录下
  1. 修改nginx配置，将原来的80端口改成443，添加ssl证书配置
   server {
        listen 443 ssl;
        #绑定证书的域名
        server_name ccsu.vip;
        #证书文件名称
        ssl_certificate ccsu.vip_bundle.crt;
        #私钥文件名称
        ssl_certificate_key ccsu.vip.key;
        ssl_session_timeout 5m;
        #下面三行照写
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
        
        location / {
            root   /app/demo/;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass http://127.0.0.1:8000/;
        }
        #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;
        }
    }

  1. 再去浏览器访问 ccsu.vip/ ，成功访问到443端口配置信息

  2. 配置80端口重定向

当你访问 http://ccsu.vip/ 不会自动跳转到https，所以需要配置80端口重定向到443端口
修改配置
 server {
     listen 80;  #代理端口
     server_name ccsu.vip; #服务器名
     return 301 https://$host$request_uri; #重定向443
  }
  1. 不管访问的https还是http，都进入443端口，则成功
avatar
文章
阅读
粉丝