引言:

之前开源项目的vue前端是直接运行在自己的服务器上,后来有一天网站打不开了,被hacker扫描攻击了,在对我的网站进行目录穿越,想要获取我的ssh信息…
看报错,是没有利用成功的,没有穿越成功hhh…🤣🤣🤣

由于前端是base其他项目进行魔改的,不太熟悉前端，也不知道有没安全漏洞，吓得我赶紧先把前端进程停了。
现在要把前端分离开，部署在免费的Vervel上…

部署步骤：

根据教程使用 Vercel 托管 Vue3 前端静态页面,几行命令就快速部署成功了.神奇~

在项目根目录，全局安装 vercel 依赖

1	npm i -g vercel

在根目录创建 vercel.json 文件

1
2
3

{
  "rewrites": [{"source":  "/api/(.*)", "destination": "/api"}]
}

在根目录创建文件 api\index.js

const express = require('express') // 引入express
const app =express()
app.use(express.static("../dist")) // 托管到dist目录(打包)

module.exports = app // 导出app实例

打开控制台，输入命令：

1	vercel login

[root@foolisheddy vue-color-avatar]# vercel login
Vercel CLI 28.4.2
> Log in to Vercel github
> Success! GitHub authentication complete for czw_yeah@hotmail.com
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).
You have mail in /var/spool/mail/root
[root@foolisheddy vue-color-avatar]# vercel
Vercel CLI 28.4.2
? Set up and deploy “/jcoin/crypto-young-nft/vue-color-avatar”? [Y/n] y
? Which scope do you want to deploy to? jerrychan807
? Link to existing project? [y/N] n
? What’s your project’s name? vue-color-avatar
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Vite):
- Build Command: vite build
- Development Command: vite --port $PORT
- Install Command: `yarn install`, `pnpm install`, or `npm install`
- Output Directory: dist
? Want to modify these settings? [y/N] n
🔗  Linked to jerrychan807/vue-color-avatar (created .vercel and added it to .gitignore)
🔍  Inspect: .... [2s]
✅  Production: https://vue-color-avatar-rosy.vercel.app [1m]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/jerrychan807/vue-color-avatar/settings

不到5分钟就搞定了,surprise!!!
分配出来的域名是https://vue-color-avatar-rosy.vercel.app,可以正常访问。
在vercel上看,也是部署成功了。
后面再把域名解析修改一下,等生效nft.foolisheddy.top

Trash Bin

DevRecord-部署vue前端到Vervel上

引言:

部署步骤：

Refs: