背景
系統(tǒng)代碼中存在有配置文件哩簿，針對于不同的客戶，配置文件是不同的惧财。針對這種情況览祖，如果進行登錄服務器再操作是麻煩的孝鹊，因此希望開發(fā)出相應的工具，可以線上直接進行編輯保存的展蒂。
環(huán)境搭建
koa依賴安裝
這里使用pnpm相對于npm它有更多的優(yōu)勢又活。
pnpm add koa koa-router
koa-router的基本使用
// router/index.js
const Router = require('koa-router')
const home = require('./home.js')
let router = new Router()
router.use('/', home.routes(), home.allowedMethods())
module.exports = router
// router/home.js
const Router = require('koa-router')
const router = new Router()
home.get('/',async ctx=>{
ctx.body = 'hello world'
})
// app.js
const app = require('Koa')()
const router = require('./src/router/index')
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000,()=>{
console.log('app is starting at port 3000苔咪！')
})
<meta charset="utf-8">
程序熱更新
在開發(fā)代碼時，如果進行了代碼的修改柳骄，需要關(guān)閉并重新啟動服務团赏，才能看到效果，這個是很麻煩的耐薯。而在node中可以使用nodemon來進行文件的監(jiān)聽舔清，并自動觸發(fā)重啟。
pnpm add nodemon -D
// package.json
{
"scripts": {
"serve": "nodemon main.js"
},
}
vscode中的斷點調(diào)試
// .vscode/setting.json
{
"version": "0.2.0",
"configurations": [
{
"command": "npm run serve",
"name": "Run npm run serve",
"request": "launch",
"type": "node-terminal"
}
]
}
至此曲初，基本的環(huán)境配置已經(jīng)完成体谒。
頁面開發(fā)
這里使用koa推薦的模板引擎ejs，來進行服務端頁面的開發(fā)臼婆。
如何在模板中寫js抒痒？
直接寫在script中
<h1>hello world</h1>
<script type="text/javascript">
console.log("hello world");
</script>
如何引入一個頁面?
使用include語法
<%- include('./utils.ejs') %>
如何引用第三方插件ace editor?
因為在ejs中，并不像在工程化的項目中的颁褂，直接安裝依賴并引入故响，便是可以直接使用的。而是需要通過script的方式引入痢虹，那首先便是需要找到插件的文件位置被去。
- 安裝依賴
pnpm add ace-builds
-
打開依賴，找到package.json奖唯，并查看main的位置
ace.png
3.將整個文件夾拷貝出
靜態(tài)資源路徑設(shè)置
// 安裝
pnpm add koa-static
// app.js中使用 設(shè)置 static為靜態(tài)目錄
const staticFiles = require('koa-static')
app.use(staticFiles(join(__dirname, './static/')))
需要注意的是訪問時：
- 不要添加 static 不然報404
-
需要直接訪問到文件才有效
ace-view.png
編輯器相關(guān)設(shè)置
主題設(shè)置
- 通過script引入主題：
<script src="/lib/ace/mode-javascript.js"></script>
-
找到主題名
theme.png - 設(shè)置主題
editor.setTheme("ace/theme/twilight");
模式設(shè)置
editor.session.setMode("ace/mode/javascript");
代碼格式化
// 引入文件
<script src="/lib/ace/ext-beautify.js"></script>
// 導出定義
var beautify = ace.require("ace/ext/beautify");
// 使用
beautify.beautify(editor.session);
// 事件監(jiān)聽
editor.commands.addCommand({
name:"save",
bindKey:{win:"Ctrl-S",mac:"Command-S"},
exec(){
// 格式化 保存
}
})
接口開發(fā)
基本代碼
const path = ...
home.post('getFile', async (ctx) => {
const back = fs.readFileSync(path, 'utf-8')
ctx.body = createRespose({
data: back
})
})
home.post('saveFile', async (ctx) => {
console.log(ctx.request.body.data)
fs.outputFile(path, ctx.request.body.data, (res) => {
console.log(res)
ctx.body = createRespose({
data: "保存成功"
})
})
}) // 這種寫法不行的
ctx.body 是必須要放出來的惨缆，因為回調(diào)是異步的 此時整個外部的已經(jīng)走完成了的 返回的時機錯過了的。
接口調(diào)試
這里推薦使用一款chrome插件postwomen丰捷。
`
線上部署
linux環(huán)境下node安裝坯墨，與軟鏈接設(shè)置
// 下載 可以先從本地下載再上傳的 公司測試服很慢
wget https://nodejs.org/dist/v14.16.1/node-v14.16.1-linux-x64.tar.xz
// 解壓
tar xf node-v14.16.1-linux-x64.tar.xz
// 設(shè)置軟鏈接
ln -s /home/soft/node-v14.16.1-linux-x64/bin/node /bin/node
ln -s /home/soft/node-v14.16.1-linux-x64/bin/npm /bin/npm
ln -s /home/soft/node-v14.16.1-linux-x64/bin/pm2 /bin/pm2
ln -s /home/soft/node-v14.16.1-linux-x64/bin/pnpm /bin/pnpm
node使用pm2進程管理
pm2 start app.js # 啟動app.js應用程序
pm2 start app.js -4 # cluster mode 模式啟動會啟動4個app.js 4個應用程序會自動負載均衡
pm2 start app.js --watch # 當文件變化時會自動重新啟動應用
pm2 logs # 顯示出所有應用程序的日志
pm2 logs [app-name] # 顯示出指定應用程序的日志
pm2 stop all # 停止所有的應用程序
pm2 delete 0 # 刪除指定應用 id 0
也可以通過 pm2 --help查看。
意外情況的處理
我使用pm2 start app.js --watch -i 2啟動應用后病往，利用pm2 stop app.js,發(fā)現(xiàn)服務并沒有關(guān)閉捣染，還是可以正常訪問到的，再次利用pm2 stop all,甚至是使用pm2 kill all停巷，依舊沒有解決問題耍攘。
通過lsof -i:port來查看端口占用情況，然后找到pid利用kill port結(jié)束畔勤，通過這樣的方式蕾各，才將應用最終關(guān)閉。
但是之后庆揪，再次啟動式曲，并利用
pm2 stop all還有pm2 delete all這種方式來關(guān)閉，是可以成功關(guān)閉的。
最后
通過這樣的一個小的工具吝羞，盡管還是很簡單兰伤，但是可以做到不用分發(fā)服務器端密碼，而開發(fā)人員可以修改配置的目的钧排。
