系列文章目錄

Linux作業系統筆記【超詳細】

本篇文章主要從準備篇、專案開發、專案打包、專案部署四個部分去介紹如何把前后端分離的專案部署到阿里云服務器，在服務器上去玩自己的專案，
專案最終效果圖：輸入ip即可訪問！！！

前言

部署的大概的步驟流程如下圖：

一、準備篇

1、阿里云服務器（Linux CentOS 7.3 64bit）
2、安裝Xshell、Xftp連接工具并成功連接服務器，
3、在服務器上安裝JDK、Mysql、Redis、Tomcat、Nginx等環境，并確保安裝成功！
4、Mysql安裝成功后，使用Navicat連接工具連接服務器上的Mysql，
5、Redis安裝成功后，使用RedisDesktopManager連接工具連接服務器上的Reids，

二、專案開發及除錯

部署的專案是之前做的一個小專案，Vue+SpringBoot前后端分離的專案，
1、執行SQL腳本，在服務器mysql上創建表，
2、修改Mysql連接配置，修改組態檔application.yml中Mysql資料庫url、username、password為你實際服務器上資料庫配置，
3、修改Redis的連接配置，修改Redis快取的 host 、 password 等連接資訊為你實際服務器上Redis配置，
4、本地運行測驗，啟動前端、后端專案確保專案成功運行，

三、專案打包

1、前端專案構建打包，切換到專案根目錄下，執行下面命令，

npm run build:prod

注：構建打包成功之后，會在根?錄?成 dist ?件夾，??就是構建打包好的前端項??件！
2、后端專案構建打包，為了方便起見，Spring Boot 由于自帶 Tomcat 應用服務器，專案默認會打包為可執行的 jar 包，
切換到專案的根目錄，執行 mvn package 命令即可構建打包，構建打包完成并可執行的 jar 包位于target檔案夾，

四、專案部署

1、前端部署，使用Xftp工具將前端打包完成的dist檔案夾，上傳至服務器的/usr/local/web檔案夾下，
修改Nginx的組態檔nginx.conf，位于目錄/etc/nginx

修改配置如下：

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid  /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  118.31.187.5;
     #  root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
           root   /usr/local/web/dist;
           try_files $uri $uri/ /index.html;
           index  index.html;
        }
      location /prod-api/ {  # 反向代理到后端工程
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8088/;
        }


     #     error_page 404 /404.html;
    #     location = /404.html {
    #    }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#        location = /404.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#        }
#    }

}

改動的地方如下：

  location / {
           root   /usr/local/web/dist;
           try_files $uri $uri/ /index.html;
           index  index.html;
        }

 location /prod-api/ {  # 反向代理到后端工程
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8088/;
        }

執行如下命令，重新加載 Nginx 使其生效，

nginx -s reload

2、后端部署，使用Xftp工具將打包完成的jar包，上傳至服務器的/usr/local/web目錄下面，
使用后臺的方式啟動后端工程，

nohup java -jar xx_web.jar >/dev/null 2>&1 &

注：阿里云服務器需要配置安全組，并支持埠訪問；比如80，8080，3306、6379埠等，

測驗

在瀏覽器的地址欄中，訪問IP， 即可進入后臺管理系統！！！