工夫就如白驹过隙，转眼间曾经是 2028 年了。小二入职一家初创公司曾经 6 年了，眼瞅着开发团队从 3 集体壮大到 54 人，心里有时候会感觉挺不堪设想的。
这些年，身边的共事来了又去，有些刚相熟没多久，就因为看不到公司前景迅速撤退了，像他这样保持下来的老员工，寥寥无几，大略也就四根手指头吧，如果不包含老板的话。
小二之所以没走，并不是因为他眼光久远，看清楚了公司的发展前景，而是他本人不晓得去哪里更好，只是没想到，公司在当地倒退的还挺有模有样。
这是六年前他写下的一篇对于编程喵🐱开源我的项目如何一键部署在云服务器上的计划，当初看起来尽管有些稚嫩，但足够的具体，应用起来也十分的便捷。有须要的小伙伴能够拿来作为参考和借鉴。
前情提醒：不喜爱宝塔面板的小伙伴能够扭脸就走了，请冷酷无情点，下一篇上 Docker。
云服务器
咱们须要一台云服务器，我之前白嫖过一台丐版的，1 核 1G 内存，并且曾经装置了宝塔面板。
这是从宝塔面板首页看到的服务器配置详情。
马上 618 了，应该有不少云服务器商家开始整活了，须要白嫖的小伙伴留神关注。
MySQL
登录宝塔面板，点击「数据库」→「增加数据库」，填写数据库名，宝塔面板会主动帮咱们创立一个和数据库同名的账号，留神拜访权限抉择「本地服务器」。
在 codingmore 栏目中点击「导入」「从本地上传」编程喵的数据库文件。上传实现后点击导入。
DB 文件放在 coding-more/doc 目录下。
倡议先做一次备份，点击「无备份」「备份」就能够将咱们的数据库文件备份下来了，如果前面想复原的话，间接点击「复原」就能够了。
记住用户名，并复制明码，而后在数据库条目中点击「治理」
填写用户名和明码后，点击执行。
就能够看到编程喵的数据库文件了。
Nginx
Nginx 是一个高性能的 HTTP 和反向代理 Web 服务器，基本上就变成了一个服务器必须装置的前置条件之一。
宝塔面板中装置 Nginx 比较简单，间接在软件商店中搜「Nginx」就能够点击装置了。
Redis
宝塔面板中装置 Redis 也比较简单，间接在软件商店中搜「Redis」就能够点击装置了。
我的项目打包
1）codingmore-admin
编程喵的治理后端，留神批改生产环境下的 MySQL 用户名和明码，在 application-prod.yml 文件中。
而后把 application.yml 文件中的 active 批改为 prod 生产环境。
替换 OSS 配置。
2）codingmore-web
编程喵的 Web 前端（网站门户、文章展现 / 文章详情等），留神批改生产环境下的 MySQL 用户名和明码，在 application-prod.yml 文件中。
而后把 application.yml 文件中的 active 批改为 prod 生产环境。
而后就能够双击 Maven 的 package 打包了。
3）codingmore-admin-web
admin 治理端的前端界面。在 Visual Studio Code 中，当初终端中执行 yarn install 装置我的项目的依赖插件。
再执行 yarn run build 就能够构建 codingmore-admin-web 的动态页面了。
会在我的项目的根目录中生成一个 dist 目录，外面就是打包好的治理端动态页面。
打包的时候有两个要点要补充下，在 config 目录下有三个配置文件，dev.env.js 是开发环境下的一些配置，index.js 是主配置，prod.env.js 是生产环境下的配置。
为了进步网站的性能，咱们须要敞开 source map，设置 productionSourceMap: false，同时开启 js 和 css 的文件压缩性能。
这样打包后的文件大小就会小很多，放到服务器上也能缩小网络申请的响应工夫。
能够看得出，最大的一个 js 文件为 3.7M，压缩版只有 662kb，体积放大了五倍。
将打包好的文件上传到服务器
在宝塔面板中点击「FTP」「增加 FTP」。
点击「根目录」
跳转到文件页。
点击上传，在 target 目录下抉择上传的两个 jar 包，admin 和 web。
点击「开始上传」
还有 codingmore-admin-web 的动态文件。
一键部署
在软件商店里搜「Java」关键字，能够看到一个「Java 我的项目一键部署 3.5」的插件，装置它。
进入「Java 我的项目一键部署」面板。
能够在「容器治理」面板中抉择 Tomcat 8 装置下，如果没有装置 JDK，在装置 Tomcat 8 的时候会默认装置一个 JDK 1.8。
进入 Spring Boot 面板，点击「增加我的项目」，点击「我的项目门路」右侧的文件夹图标，就能够上传部署咱们的 Spring Boot 我的项目了。
codingmore-web（网站前端）
先抉择 codingmore-web。
填写域名（编程喵的域名为 codingmore.top），批改端口号为 8081，application.yml 文件中定义的。
点击确定。
能够看到服务曾经在启动了，点「日志」看一下。
没问题。
也能够在这个门路下应用终端工具看日志。
在平安面板里确认一下 8081 端口是否放开。
确认放开后，关上 Chrome 浏览器的无痕模式，输出 IP+ 端口号。
通过域名 + 端口号的模式也能够拜访到。
codingmore-admin（网站治理端）
再次进入「Java 我的项目一键部署」Spring Boot 面板中，增加 codingmore-admin 我的项目。
稍等片刻，来看一下日志。
启动没问题。
codingmore-admin 只是一个后端服务，界面是用 vue 实现的，所以咱们此时能够通过 Swagger 来确认一下接口是否能够失常拜访。
先放行 9002 端口。
在浏览器地址栏里输出 http://www.codingmore.top:900…，能够看到咱们用 Knife4j+Swagger 生成的 API 文档接口。
OK，这样就能够验证咱们的 admin 端服务也正确运行了。
随后，为了缩小服务器被攻打的可能性，咱们关掉 9002 的端口。
Nginx 配置
codingmore-web
域名 + 端口号尽管能够拜访，但不够优雅，咱们想间接拜访域名 codingmore.top，该怎么办呢？
能够应用 Nginx 进行端口转发。
Nginx 的实现原理是，用 Nginx 监听 80 端口，当有 HTTP 申请到来时，将 HTTP 申请的 HOST 等信息与配置文件进行匹配并转发给对应的端口。
比如说，当用户拜访 codingmore.top 时，Nginx 从配置文件中得悉这是一个 HTTP 申请，于是将此申请转发给 8081 端口的利用解决。
upstream codingmore_web_pool{
server 127.0.0.1:8081;}
server {
listen 80;
server_name codingmore.top;
access_log logs/codingmore_web.log;
error_log logs/codingmore_web.error;
#将所有申请转发给 pool 池的利用解决
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}}
复制代码
这就是所谓的端口转发，由软件对立监听某个域名上的某个端口（个别是 80 端口），当拜访服务器的域名和端口符合要求时，就依照配置转发给指定的 Tomcat 服务器解决。咱们罕用的 Nginx 也有端口转发性能。
OK，原理理解完后，咱们把这段配置复制到宝塔面板中的 Nginx 配置中。
点击「保留」。
再在浏览器中拜访 codingmore.top 就能够申请到内容了。
既然如此，咱们顺带把 8081 端口给关掉，缩小一个服务器被攻打的可能性。
OK，这样咱们就实现了 codingmore-web 也就是编程喵🐱前端的服务部署了。
codingmore-admin-web
codingmore-admin-web 打包后的文件是动态的，所以咱们只须要在 Nginx 里增加 admin 的配置门路就 OK 了。
upstream codingmore_web_pool{
server 127.0.0.1:8081;}
server {
listen 80;
server_name codingmore.top;
access_log /home/www/codingmore_web.log;
error_log /home/www/codingmore_web.error;
location /admin {
alias /www/wwwroot/itwanger/dist/; # 根目录
index index.html;
}
#将所有申请转发给 pool 池的利用解决
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}}
复制代码
咱们在 server 中减少了一个 admin 的 location，也就是说，当咱们拜访 codingmore.top/admin 的时候，就去申请 /www/wwwroot/itwanger/dist/ 目录下的动态文件。
这里讲一下 root 和 alias 的区别：
root：理论拜访的地址前缀是 root + 申请的 path 门路，即 admin => /www/wwwroot/itwanger/dist/admin
alias: 理论拜访的就是 /www/wwwroot/itwanger/dist
留神两者的区别。咱们来拜访下 codingmore.top/admin：
OK。
编程喵🐱是一个前后端拆散我的项目，前端的申请如何拜访后端的 API 接口呢？简略聊一下。
关上 codingmore-admin-web/config/prod.env.js 文件，外面有一个 VUE_APP_BASE_API 属性，它的值为 /api，也就意味着前端的申请会发送到 /api 这个前缀门路下。
‘use strict’
module.exports = {
NODE_ENV: ‘”production”‘,
VUE_APP_BASE_API: ‘”/api”‘
}
复制代码
那咱们的 codingmore-admin 后端服务是跑在 9002 端口下的，这就意味着，咱们须要在 Nginx 中减少一个门路，将 api 前缀的申请转发到 9002 下。
OK，来看一下残缺的配置内容。
upstream codingmore_web_pool{
server 127.0.0.1:8081;}
upstream codingmore_admin_pool{
server 127.0.0.1:9002/;}
server {
listen 80;
server_name codingmore.top;
access_log /home/www/codingmore_web.log;
error_log /home/www/codingmore_web.error;
location /admin {
alias /www/wwwroot/itwanger/dist/; # 根目录
index index.html;
}
location /api/ {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_admin_pool;
}
#将所有申请转发给 pool 池的利用解决
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}}
复制代码
ok，登录 admin 端，能够看到咱们的文章治理页面了。
网站域名
编程喵 web 端：www.codingmore.top
编程喵 admin 端：www.codingmore.top/admin
编程喵 GitHub 仓库：github.com/itwanger/co…
没有什么使我停留——除了目标，纵然岸旁有玫瑰、有绿荫、有平静的港湾，我是不系之舟。