EL-ADMIN 后台管理系統
項目簡介
一個基於 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分離的后台管理系統
開發文檔： https://el-admin.vip
體驗地址： https://el-admin.xin
賬號密碼： admin / 123456
項目源碼
| 后端源碼 | 前端源碼 | |
|---|---|---|
| github | https://github.com/elunez/eladmin | https://github.com/elunez/eladmin-web |
| 碼雲 | https://gitee.com/elunez/eladmin | https://gitee.com/elunez/eladmin-web |
開始記錄阿里雲部署
部署項目
本項目可以使用 tomcat 或者 nginx 部署，在這里分享下常規部署 [Nginx] 與使用Docker部署的兩種方式
#SSH工具推薦
先分享個好用的 SSH 工具 FinalShell，后面部署會使用到
#常規部署方式
#后端部署
#修改配置
按需修改我們的 application-prod.yml，如需打開 Swagger ，那么需要將 enabled 設置為 true
swagger: enabled: true #打包項目
我們需要將項目打包好的 Jar 文件上傳到服務器，步驟圖如下：
#編寫腳本
編寫腳步用於操作 java 服務
(1) 啟動腳本 start.sh
nohup java -jar eladmin-system-2.6.jar --spring.profiles.active=prod > nohup.out 2>&1 &
(2) 停止腳本 stop.sh
PID=$(ps -ef | grep eladmin-system-2.6.jar | grep -v grep | awk '{ print $2 }')
if [ -z "$PID" ]
then
echo Application is already stopped
else
echo kill -9 $PID
kill -9 $PID
fi
(3) 查看日志腳本 log.sh
tail -f nohup.out
腳本創建完成后就可以操作 java 服務了
# 啟動java
./start.sh
# 停止java服務
./stop.sh
# 查看日志
./log.sh
#配置 nginx
我們可以使用 nginx 代理 java服務，添加配置
server {
listen 80;
server_name 域名/當前服務器外網IP;
location / {
proxy_pass http://127.0.0.1:8000; #這里的端口記得改成項目對應的哦
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
#前端部署
這里提供兩個配置方式 [History、Hash] 的部署方式，首先修改接口地址，如果是 IP 地址，那么需要修改為外網 IP
#History 模式
項目默認是 History 模式，不需要做任何修改
#Hash 模式
#1、修改 routers.js，取消 hash 的注釋
#2、修改根目錄 vue.config.js 配置，取消 15 行的注釋
#打包項目
不管是將項目部署到 nginx 還是其他服務器，都需要先將項目打包
npm run build:prod
打包完成后會在根目錄生成 dist 文件夾，我們需要將他上傳到服務器中
#Nginx 配置
在 nginx/conf/nginx.conf 添加配置
#History 模式配置
server
{
listen 80;
server_name 域名/外網IP;
index index.html;
root /home/wwwroot/eladmin/dist; #dist上傳的路徑
# 避免訪問出現 404 錯誤
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
#Hash 模式配置
server {
listen 80;
server_name 域名/外網IP;
location / {
root /home/wwwroot/eladmin/dist; #dist上傳的路徑
index index.html;
}
}
#二級目錄部署
#Nginx 配置
server {
listen 80;
server_name 域名/外網IP;
location /dist {
root /home/wwwroot/eladmin/test;
index index.html;
}
}
文件目錄
注意目錄名稱要與配置名稱一致
#重啟Nginx
systemctl restart nginx
重啟 nginx 后，訪問你的域名或者IP地址即可
#容器部署方式
對於熟悉 Docker 的開發者來說，使用 Docker 部署管理更加的簡單高效
我一般習慣將 home 目錄作為工作目錄，因此 Docker 掛載的文件也都會存放在 home 目錄中
#安裝Docker
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun && systemctl start docker && systemctl enable docker
如果你機器是國內的機器，那么需要配置鏡像加速，一般使用阿里雲鏡像加速 阿里雲加速官網
#安裝Mysql與Redis
這里使用的是 mariadb 鏡像，並且將 mariadb 數據庫文件掛載到宿主機的 /home/mysql/ 目錄下
docker run -v /home/mysql/:/var/lib/mysql \
-p 3306:3306 -e MYSQL_ROOT_PASSWORD=dqjdda1996 \
--privileged=true --restart=always --name mariadb -d mariadb
安裝Redis
docker run -itd --name redis --restart=always -p 6379:6379 redis
#構建與啟動Java容器
#構建鏡像
Docker 部署使用到了環境變量參數，對於非 V2.6 版本的，需要修改 application.yml、application-prod.yml 等配置
修改完成后，打包項目將打包好地Jar上傳到服務器的 /home/eladmin 目錄，在該目錄創建 Dockerfile 文件，並編寫 Dockerfile
FROM java:8
ARG JAR_FILE=./*.jar
COPY ${JAR_FILE} app.jar
ENV TZ=Asia/Shanghai
ENTRYPOINT ["java","-jar","/app.jar"]
構建鏡像
docker build -t eladmin .
#啟動Java容器
將容器中的 /home/eladmin/ 掛載到宿主機的 /home/data/ 目錄並且設置數據庫地址與密碼等環境變量參數
docker run -d \
--name eladmin --restart always \
-p 8000:8000 \
-e "TZ=Asia/Shanghai" \
-e DB_HOST=172.17.0.1 \
-e DB_PWD=mysql_pwd \
-e REDIS_HOST=172.17.0.1 \
-v /home/data/:/home/eladmin/ \
eladmin
#安裝與配置Nginx容器
#安裝Nginx
- /home/nginx/conf.d 用於存放配置文件
- /home/nginx/cert 用於存放 https 證書
- /home/nginx/html 用於存放網頁文件
- /home/nginx/logs 用於存放日志
docker run -d \
--name nginx --restart always \
-p 80:80 -p 443:443 \
-e "TZ=Asia/Shanghai" \
-v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf.d:/etc/nginx/conf.d \
-v /home/nginx/logs:/var/log/nginx \
-v /home/nginx/cert:/etc/nginx/cert \
-v /home/nginx/html:/usr/share/nginx/html \
nginx:alpine
#配置Nginx
這里使用 Nginx 反向代理訪問后端服務，由於容器內部通信，因此需要使用容器的 IP，也就是 172.17.0.1
在 /home/nginx/conf.d 創建一個 eladmin.conf 的配置文件，文件內容如下
server
{
listen 80;
server_name 域名/外網IP;
index index.html;
root /usr/share/nginx/html/eladmin/dist; #dist上傳的路徑
# 避免訪問出現 404 錯誤
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
# 接口
location /api {
proxy_pass http://172.17.0.1:8000;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# 授權接口
location /auth {
proxy_pass http://172.17.0.1:8000;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# WebSocket 服務
location /webSocket {
proxy_pass http://172.17.0.1:8000;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# 頭像
location /avatar {
proxy_pass http://172.17.0.1:8000;
}
# 文件
location /file {
proxy_pass http://172.17.0.1:8000;
}
}
注意：容器中 /usr/share/nginx/html/eladmin/dist 對應宿主機的 /home/nginx/html/eladmin/dist 目錄，因此文件上傳到宿主機的目錄即可
#打包上傳前端代碼【重要】
由於Nginx使用的是反向代理后端接口，因此 非 V2.6 版本需要做如下修改
1、將 .env.production 中的接口地址改為 '/'
2、修改 api.js 中的 baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
3、打包項目並且上傳到 /home/nginx/html/eladmin 目錄下
4、重啟 Nginx 容器 docker restart nginx
docker部署遇到的問題
docker nginx 啟動失敗
docker run -d \ --name nginx --restart always \ -p 80:80 -p 443:443 \ -e "TZ=Asia/Shanghai" \ -v /home/nginx/conf.d:/etc/nginx/conf.d \ -v /home/nginx/logs:/var/log/nginx \ -v /home/nginx/cert:/etc/nginx/cert \ -v /home/nginx/html:/usr/share/nginx/html \ nginx:alpine
報錯信息
關於Docker 部署nginx 啟動掛載目錄報錯
docker: Error response from daemon: OCI runtime create failed: container_linux.go:345: starting container process caused “process_linux.go:424: container init caused “rootfs_linux.go:58: mounting \”/docker/nginx/conf\” to rootfs \"/var/lib/docker/overlay2/126c244dc6ee7095b1501a503eb361bade4fc255601ec0b0fe96238b58178958/merged\" at \"/var/lib/docker/overlay2/126c244dc6ee7095b1501a503eb361bade4fc255601ec0b0fe96238b58178958/merged/etc/nginx/nginx.conf\" caused \“not a directory\”"": unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type.
部署的項目訪問太慢，打開F12看到是其中的js打包太大。2.9M 服務器帶寬3M 加載了10幾秒
1、修改前端打包
npm i -D compression-webpack-plugin
修改 vue.config.js
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
configureWebpack: {
plugins: [
// 下面是下載的插件的配置
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
},
打包后可以看到生成對應的壓縮文件
再次訪問項目可以看到對應的文件訪問快了很多
2、修改nginx部署
server
{
gzip on;
gzip_min_length 1k;
gzip_comp_level 1;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
gzip_static on
gzip_vary on;
gzip_buffers 2 4k;
gzip_http_version 1.1;