前言：大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。
本文主要讲解如何一步一步的来部署自己的前端项目，到linux服务器上。我自己的linux服务器选择的是opensuse。
这里说明一下：opensuse 通过zypper可以方便的进行软件管理，类似centos的yum 软件。
1、安装nginx
// 查找nginx zypper search nginx // 通过zypper安装nginx zypper install nginx // 查看nginx是否安装成功,安装成功则出现版本相关信息 nginx -v
2、设置nginx服务自动启动
// 设置nginx开机自动启动 systemctl enable nginx // 取消开机自动启动 systemctl disable nginx // 启动nginx服务 systemctl start nginx // 停止nginx服务 systemctl stop nginx // 查看nginx服务的状态 systemctl status nginx //修改nginx配置文件等，重新载入 nginx -s reload
3、配置nginx的配置文件
在/etc/nginx/conf.d文件夹下新建一个html.conf
server { ## 端口 listen 88; ## 前端项目打包后的路径 root /usr/local/qiankun/blog; index index.html index.htm; ## 设置跨域，其实可以忽略 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; if ($request_method = 'OPTIONS') { return 204; } location / { try_files $uri $uri/ = 404; } }
4、创建项目
这里我直接使用我自己的项目，这个项目也在github上开源了，谁都可以看到 github.com/aehyok/blog
当然这里面已经包含了我的半自动化脚本和全自动 github Actions yml脚本，推送代码到指定分支的时候就会自动部署。
这里要使用的便是我自己写的半自动化脚本。
5、通过脚本执行打包后，自动拷贝到linux服务器
在package.json中引入zx
npm i zx
然后在package.json中的scripts
"buildtome": "npm run build && zx ./scripts/prebuild.mjs",
prebuild.js文件内容如下
import { $, argv } from "zx"; export const isWin = () => { // win32 代表window平台 // darwin 代表mac平台 // return process.platform === "win32" ? true : false; } const root = process.cwd() let dir = isWin() ? '/h/github/blog': root console.log(process.platform, 'root') let path = `${dir}/docs/.vitepress/dist` const gitPullInfo = await $`scp -r ${path}/* root@81.69.241.99:/usr/local/qiankun/blog/` // const gitPullInfo = await $`cd ${path};`; if(gitPullInfo.exitCode === 0) { console.log('复制到linux远程服务器成功') } else { console.log('发生错误') }
先来判断是在window执行的脚本，还是在mac下（linux应该也可以不过我没尝试过）两者获取路径的方式是不太一样。 然后其实就是通过scp指令，将本地打包编译好的目录，拷贝到服务器对应的目录上。
关于免密登录这里我前两天整理过，如果有需要可以看看 juejin.cn/post/713155…
最后访问网页
6、总结
不用靠后端也可以自己部署自己的项目，自己实际操作下来也没什么难度，加油继续折腾吧。
我的个人博客：vue.tuokecat.com/blog
我的个人github：github.com/aehyok
我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…
