文章目錄
- 一、前提
- 二、後端部署
- 前提：安裝了java運行環境。
- 1、生成jar包
- 2、運行jar包
- 三、前端部署
- 1、前端打包
- 2、前端部署
- （1）nginx服務器的下載
- （2）Nginx代理配置
- （3）啓動nginx服務器
- （4）瀏覽器中訪問前端地址，進入前端頁面
- 總結
一、前提
已經完成了若依框架前端、後端開發，要進行部署。
二、後端部署
前提：安裝了java運行環境。
1、生成jar包
也可生成war包，差不多，這裏我生成的是jar包。
在後端配置文件中，配置好服務端的端口，默認8080，前端通過http://localhost:8080訪問服務端。
點擊右側maven，然後在Liftcycle下分別雙擊clean和package
這時候在admin項目下的，target中會生成jar包。
轉到路徑下，將這個jar包複製到指定要部署的路徑，或者服務器路徑下。
2、運行jar包
選中放置jar包的路徑，輸入cmd啓動當前路徑下的命令窗口：
輸入啓動jar包的命令，將這裏的xxx-admin.jar替換成你的jar包的完整名稱。
java -jar xxx-admin.jar稍等一會，命令行中就會完成jar包中後端框架的運行
後端項目已經成功運行！
注意運行後端後，如果要停止運行，使用鍵盤快捷鍵Ctrl + C
在後端jar包已經運行的情況下，瀏覽器中，也可以直接通過這個地址訪問服務端，但會提示後端框架已經運行，要通過前端進行訪問。
三、前端部署
1、前端打包
在前端終端中輸入打包命令，這裏打包的是生成版本。
npm run build:prod然後會有一段時間進行打包。
等打包完成後，前端項目中會新增一個dist文件夾，這就是前端的打包文件夾了。
回到前端項目的路徑下，把dist文件夾整個複製到前面放置jar包的文件夾，或者你自定義的文件夾中。
這裏我方便查找，建了一個_deploy文件夾，將前後端打包文件都放在了這個路徑下。
2、前端部署
前端部署，有幾種方式，這裏我採用的是nginx服務器的方式，也是一種常見的部署方式。需要下載-安裝下nginx服務器，軟件不是很大，安裝也簡單。nginx與IIS類型就是一個web服務器。
由於我電腦上之前安裝了IIS服務器，有端口衝突，我就先將IIS關閉了，也可以使用配置不同端口的情況下，讓兩個服務器都能夠使用。
Nginx (engine x) 是一個高性能的HTTP和反向代理web服務器，同時也提供了IMAP/POP3/SMTP服務。
（1）nginx服務器的下載
nginx下載地址：https://nginx.org/en/download.html
下載選擇與電腦系統對應的版本，我是windows10 系統，下載的是這個版本。
下載好以後就是一個安裝文件夾。
（2）Nginx代理配置
到nginx文件夾的路徑下，找到conf - nginx.conf文件進行配置。
找到server節點進行配置：
nginx.conf完整代碼
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root F:\xxx_deploy\dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
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:8080/;
}
#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;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}（3）啓動nginx服務器
nginx服務器有多種啓動方式，這裏我採用windows下最簡單的方式，選中nginx.exe文件，右鍵以管理員身份運行。注意直接運行可能也行，採用管理員運行方式更好點。
會有個黑影一閃而過，在任務管理器中可以看到nginx服務器已經運行。注意在已經運行的情況下，最好不要運行多個nginx服務器，可關掉多餘的運行進程。
（4）瀏覽器中訪問前端地址，進入前端頁面
在nginx服務器已經運行的情況下，在瀏覽器中輸入前端項目的地址，便直接到了登錄頁面，輸入驗證碼，可以登錄到頁面，説明部署的前端已經訪問到了部署的後端，成功！
總結
通過後端、前端的部署，已經完成了整個若依框架前後端項目的部署，是不是很簡單。
以上是在本地電腦的部署，在服務器部署也是一樣的道理，服務器需要具備後端、前端部署的前提條件：
1、服務器裝了適配版本的java環境，可以進行java -jar命令的運行；
2、配置和安裝nginx服務器。
然後將後端、前端的打包文件放在服務器指定的路徑下，便可以按照這個步驟進行同樣的部署。
最後，瀏覽器通過前端配置的IP地址可以進行訪問，説明部署成功！
