iT邦幫忙

2021 iThome 鐵人賽

DAY 24
1
Modern Web

JavaScript Easy Go!系列 第 24

#24 可攜式靜態伺服器

今天我們來用 JavaScript 做個簡單的靜態網頁伺服器吧!
疑?昨天不是說過了?
沒錯,但今天我們要把它做成「可執行檔」!

故事是這樣子的

不知道你們有沒有遇過剛開始寫網頁的朋友(用記事本寫的那種),說他寫好了一個網頁,想架個伺服器跑跑看。
然後他剛好是那種電腦沒有環境又三分鐘熱度的人。
感覺讓他裝個 Node.js、Python 或 Apache 之類的很麻煩,他以後也用不到。而且他又不想把 Source Code 放到網路上。

這時候,如果有個程式丟給他,讓他點下去就可以架好他寫的靜態網頁的話真是太好了!
所以,這個不用設定的 Click! Serve! 就出現了。

我們一樣直接找 Koa 幫忙

因為這個需求真的是蠻簡單的,只有靜態檔案,所以就直接請 Koa + Koa Static 出來吧!

const path = require("path");
const Koa = require("koa");
const app = new Koa();

app.use(async (ctx, next) => {
    console.log(`Process ${ctx.request.method} ${ctx.request.url} from ${ctx.request.ip}`);
    await next();
});

app.use(require("koa-static")("www"));

app.listen(80);

console.log("Server started at port 80");
console.log(`Serving static files from ${path.join(process.cwd(), "www")}`);
console.log("Visit http://localhost:80/ to see your website.");

我們希望當使用者點下程式後,它就會把身旁的 www 資料夾內的東西當作要 serve 的檔案。
這樣程式就寫好了,超快的!

PKG

pkg 就是能將 Node.js 程式從專案資料夾變成可執行檔的工具啦!
它其實就是把稍微修改過的 Node.js 核心跟你的程式包在一起,然後轉成 bytecode。

我們先裝好 pkg:

npm i -D pkg

然後在 package.json 中新增一個 script:

"scripts": {
    "build": "pkg index.js"
},

接著,讓 npm 去跑上面的那個 script:

npm run build

然後就等 pkg 做事吧!

pkg 預設會產生 Linux、Windows 跟 MacOS 三個平台的可執行檔。

執行

接著就可以簡單寫個 HTML JS CSS 然後把它們丟到 www 中跟剛剛產生的可執行檔放到同個資料夾內:

接著點下去那個可執行檔! 然後去 localhost

就完成了可攜式靜態伺服器了。

接下來

接下來我們讓它可以有些設定好了,因為我不想把每個資料夾都改叫 www 才能用。


每日鐵人賽熱門 Top 10 (1007)

以 10/07 20:00 ~ 10/08 20:00 文章觀看數增加值排名

  1. +145 [面試][白板題]設計一個簡易的抽獎程式
    • 作者: 寶寶出頭天
    • 系列:全端工程師生存筆記
  2. +124 Day 23 - Keyboard Row
    • 作者: 毛毛
    • 系列:30天 Leetcode解題之路
  3. +120 如何在 Angular 建立 Breadcrumb (麵包屑)
    • 作者: Mandy
    • 系列:Angular 常見問題大小事
  4. +119 [Python 爬蟲這樣學,一定是大拇指拉!] DAY23 - 實戰演練:抓取股票代碼清單 (2)
    • 作者: GreedIsGood
    • 系列:Python 爬蟲這樣學,一定是大拇指拉!
  5. +114 Day23 Let's ODOO: Currency
    • 作者: 蓋瑞
    • 系列:Let's ODOO 開發與應用30天挑戰
  6. +113 D28 - 用 Swift 和公開資訊,打造投資理財的 Apps { 三大法人成交比重實作.3 }
    • 作者: Marvin
    • 系列:使用 Swift 和公開資訊,打造投資理財的 Apps
  7. +111 Proxmox VE 客體機線上遷移
    • 作者: Jason Cheng (節省哥)
    • 系列:突破困境:企業開源虛擬化管理平台
  8. +111 Android學習筆記29
    • 作者: blossomgp3
    • 系列:Android kotlin &MVVM
  9. +110 Day 01 「科學 v.s. 數學」前言
    • 作者: Kuma
    • 系列:你就是都不寫測試才會沒時間:Kuma 的 30 天 Unit Test 手把手教學,從理論到實戰 (Java 篇)
  10. +107 DAY24神經網路(續二)
    • 作者: agaryaagarya
    • 系列:數據分析方法研究和理解演算法

上一篇
#23 3 分鐘建立 Node.js 網頁伺服器
下一篇
#25 Click! Serve! Plus
系列文
JavaScript Easy Go!31

尚未有邦友留言

立即登入留言