系列文章目錄
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, 即可進入后台管理系統!!!