这是我参与「第五届青训营」伴学笔记创作活动的第 17 天
3. 项目上线
首先这个模块不能配置路径，所以无法使用 github、gitee 的 pages 服务，只能挂载到自己的服务器上面，用 nginx 进行代理请求
1）申请一个二级域名
因为有一个从腾讯云注册的域名 zhishiyu.online，所以再次基础上申请一个二级域名
打开 DNSPOD：我的域名 - DNSPod-免费智能DNS解析服务商-电信_网通_教育网,智能DNS
申请：playground.zhishiyu.online 域名
访问该域名会重定向到：39.115.10.24 ip 的服务器
2）申请 SSL 证书
然申请一个 SSL 证书，这里点击 SSL 即可，它会自动进行申请，等个十多分钟就会收到短信
然后将证书下载下来，下载 Nginx（适用大部分场景）
3）宝塔新增网站
指定两个域名，一个服务器 ip，一个二级域名端口80 即可
要记得宝塔开放 12345 端口，服务器开放 80 端口
4）给网站添加 SSL 证书
将文件 Ctrl + A 全选然后复制到对应的框里面，打开强制 HTTPS，然后保存
5）上传 PlayGround 文件
运行 pnpm run build 将代码进行打包，获得 dist 文件夹
A. 宝塔上传
找到网站的目录，将 dist 文件全部放入到这里面
B. Xftp 上传
找到网站的目录，将 dist 文件全部放入到这里面
4. 文档库跳转 PlayGround
1）目录情况
-- site
-- docs
-- .vitepress
-- home # playground
-- composables
-- use-playground.ts # 将代码转换为 playground 识别的 hash 数据
-- hp-source-code.vue # playground 代码使用
2）use-playground.ts
// 将数据转码
function utoa(data: string): string {
return btoa(unescape(encodeURIComponent(data)));
}
// 文件名
const MAIN_FILE_NAME = "App.vue";
// 传入代码片段将其转码为 hash
export const usePlayground = (source: string) => {
const code = decodeURIComponent(source);
const originCode = {
[MAIN_FILE_NAME]: code,
};
const encoded = utoa(JSON.stringify(originCode));
// 这里使用刚才的上线的二级域名
const link = `https://playground.zhishiyu.online/#${encoded}`;
return {
encoded,
link,
};
};
3）hp-source-code.vue
点击 Playground 图标，触发的事件，跳转到线上调试地址
const toPlayground = () => {
const { link } = usePlayground(props.rawSource);
if (!isClient) return;
window.open(link);
};
5. Actions 自动化部署
1）给服务器添加本地的 SSH 公钥
如何添加本地公钥：[2. Github 和 Gitee 配置公钥](#2. Github 和 Gitee 配置公钥)
将 id_ed25519.pub 这个公钥添加到服务器里面
导入公钥：使用 xshell 打开服务器，输入：vim /root/.ssh/authorized_keys
修改ssh配置文件：vim /etc/ssh/sshd_config 追加如下内容
RSAAuthentication yes #开启RSA验证
PubkeyAuthentication yes #使用公钥验证
AuthorizedKeysFile .ssh/authorized_keys #公钥保存位置
PasswordAuthentication no #禁用密码登录
#必要时，可以通过下面的配置属性修改登录端口
Port 22
测试是否配置成功（出现操作界面即为成功）：
ssh 用户名@服务器IP
2）GitHub填写自动化配置项的变量
SSH密钥对 生成后，其实准备工作就已经完成的差不多了，最后一步就是将 YAML文件 中所需要的配置项，配置到 Github 上 首先打开对应的仓库，点击Setting > Secrets > New sceret,然后将我们复制的密钥文件内容、服务器host和登录用户名都添加到配置如下图对应的配置中，这样的话即使像小黑一样把项目开源，隐私信息也不会泄露啦。
注意：这个 DEPLOY_KEY 保存的是 id_ed25519 本地私钥内容，不是 .pub 后缀的公钥
3）updateCentos 全部配置
参考文档：使用GitHub Actions实现前端自动化打包、部署 - 掘金 (juejin.cn)
name: Blog CI/CD
on:
push:
branches:
- dev
paths-ignore:
- README.md
- LICENSE
- CHANGELOG.md
jobs:
build-production:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
persist-credentials: false
- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 7
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: pnpm install --no-frozen-lockfile
- name: Build
run: pnpm run play:build
- name: Deploy to Server
uses: AEnterprise/rsync-deploy@v1.0
env:
DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
ARGS: -avz --delete --exclude='*.pyc'
SERVER_PORT: "22"
FOLDER: ./packages/playground/dist/*
SERVER_IP: ${{ secrets.SSH_HOST }}
USERNAME: ${{ secrets.SSH_USERNAME }}
SERVER_DESTINATION: /www/wwwroot/hview-ui-playground/
6. 参考文献
Vue组件库设计 | Vue3组件在线交互解释器 - 掘金 (juejin.cn)
Vue3官方出的Playground你都用了吗？没有没关系，直接原理讲给你听-阿里云开发者社区 (aliyun.com)
element-plus/element-plus-playground: Element Plus Playground (github.com)
使用GitHub Actions实现前端自动化打包、部署 - 掘金 (juejin.cn)
centos配置ssh密钥登录_centos生成ssh密钥_日说星辰的博客-CSDN博客
