1、搭建前準備
后端代碼：https://github.com/byteblogs168/hello-blog
后端管理：https://github.com/byteblogs168/hello-blog-admin
前端主題：https://github.com/byteblogs168/theme-default
2、下載后端代碼到本地，打開application.yml，修改數(shù)據(jù)庫信息
- 后端項目自帶SQL腳本
datasource:
name: helloblog
url: jdbc:mysql://***.***.***.***:3306/helloblog?useSSL=false&characterEncoding=utf8
username: root
password: ***
3、運行后端代碼，默認運行在8086端口
4、打開后端管理系統(tǒng)
npm install --registry=https://registry.npm.taobao.org
5、打開項目根目錄中的vue.config，修改代理設置
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:8086/api/hello-blog-service`,
changeOrigin: true,
pathRewrite: { '^/api/blog': '/' }
}
}
6、啟動后端管理系統(tǒng)
vue-cli-service serve
7、進入到頁面，鼠標單擊，使用GitHub登錄，第一次登錄則默認為管理員
90C7540286884A1C9ACBA3F6FBE48F44.jpg
8、設置七牛云SDK賬號密碼，圖片等信息默認使用七牛云，后期會加入阿里云，沒有七牛云的用戶，可暫時跳過，需要時再進行設置
- 新建公有空間，私有空間不方便后期使用
6F782443F79D4E99B350000E422AAD10.jpg
- 填寫七牛云空間信息
B57522A0871A44A097D591E0A49EBD40.jpg
9、前端配置
- 打開下載好的前端項目進行編譯
npm install --registry=https://registry.npm.taobao.org
- 打開根目錄中的vue.config修改項目api訪問地址
proxy: {
// 配置多個代理(配置一個 proxy: 'http://localhost:4000' )
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:8086/api/hello-blog-service`,
changeOrigin: true,
pathRewrite: { "^/api/blog": "/" }
}
}
10、運行前端項目
vue-cli-service serve
11、訪問博客http://localhost:8002
12、目前博客還是空的，可以在后端進行文章的添加
E8BBF4245ECA408DA6CF211FFE5DE90C.jpg
13、發(fā)布博文，隨后到前端進行查看
87390ab48ac74f119773f7649feabb5f.jpg
14、到這里，博文搭建成功，但還只是本地的測試，還需要發(fā)布到云服務器之上
15、部署后端到服務器
- 配置Maven打包命令
clean package -Dmaven.test.skip=true
9F85122EEADE4C22878E53387310226F.jpg
- 運行Maven編譯之后，找到項目存放目錄，進入到target
- 將helloblog-v1.0.1-Alpha.jar上傳到服務器之中
- 使用如下命令運行后端項目
nohup java -jar helloblog-v1.0.1-Alpha.jar >catalina.out 2>&1 &16
15、部署管理系統(tǒng)與前端頁面到到服務器
- 打開管理系統(tǒng)項目，輸入如下命令
- 編譯完成后，會在項目根目錄中生成一個dist目錄
vue-cli-service build
- 打開前端項目，輸入如下命令
vue-cli-service build
- 新建文件夾用于保存頁面
#將管理系統(tǒng)編譯后的dist文件夾中的內(nèi)容上傳到此文件夾
mkdir -p /usr/lcoal/helloblog/admin
#將前端編譯后的dist文件夾中的內(nèi)容上傳到此文件夾
mkdir -p /usr/lcoal/helloblog/front
使用Nginx進行反向代理(CnetOS7安裝Nginx)
- 當前nginx安裝在/usr/local/nginx中
- vim /usr/local/nginx/conf/nginx.conf
server {
listen 80;
location /admin {
root /usr/local/hellobolg;
index index.html index.htm;
} # 配置后端訪問地址
location / {
root /usr/local/hellobolg/front;
index index.html index.htm;
} # 配置前端訪問地址
location ^~ /api/blog {
index index.html index.htm index.php;
index proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
index proxy_set_header Host $host;
index proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:8086/api/hello-blog-service; #后端服務器，配置upstream即可
}
}
- 配置完成后，訪問服務器查看是否配置成功
87390ab48ac74f119773f7649feabb5f.jpg
