前端的極簡Nginx+Docker

背景

目前我的前端工作經驗中，主要用Nginx+Docker來host React/Vue 的SPA專案，尤其在其專案中有使用虛擬路由（vue-router/react-router）；畢竟如果只用static文件的話，用戶重新整理路由很有可能發生 404（如 http://base.com和虛擬路由/demo01，假如在http://base.com/demo01重新整理，因為事實上沒有該網址所以會返回404）。

還有就是一些簡單的NodeJS demo，我也是用Docker+GCP-CloudRun來做demo。

以下就是一些工作筆記。

極簡Docker

我自己的理解是把Docker當作輕量級的虛擬機，不用手動切割硬碟，而是直接封裝成一個容器，進而和其他環境進行切割。

最簡單使用Docker的方式，是寫個dockerfile，然後build成image，再利用該image run 一個container。

而Docker最方便的地方，就是可以利用別人封裝好的Docker image來架設自己的Docker 容器環境，例如要使用版本14的node，就只要在dockerfile中加上一句FROM node:14就可以了。

Demo與指令

nodejs demo link

docker build -t demo_node:v1 .
- demo_node 為欲命名的docker image name；後面v1代表這個image的版本，如果不加的話便自動為latest。
- 可以用docker images指令來查看該image有沒有build成功
docker run -d -p 8080:3000 demo_node:v1
- 從demo的dockerfile可以看到，我們設定的docker端口為3000，而-p 8080:3000的指令代表把docker 的 3000端口映射到主機的 8080端口，所以實際上這個NodeJS App是監聽 localhost:8080
docker ps為顯示正在運行的container指令
docker stop {container id}為停止該container 的運行

極簡Nginx

nginx

Nginx除了作為web server之外，最為人知的就是它能夠以簡單的配置就能執行反向代理（Reverse proxy）和均衡負載（Load balance）。

而結合上述極簡Docker，便可以了解到，其實可以直接用官方的nginx docker來執行nginx服務。

Demo（以React SPA+react-router為例）

Nginx + React demo link

可以從dockerfile中看到，在利用node image來生成react spa後，再使用nginx的image來構建web app。

其中，nginx.conf是整個nginx服務的設定文件；而解決虛擬路由的重定向是這一段：

...
server {
	...
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

結語

自從學會了基礎的Docker和Nignx，我有了種變自由的感覺：之前需要實現一個功能的時候，可能在本機上可以做些demo；但假如要放在雲上，就會有種超出自己能力範圍的不安全感。

而現在，起碼能夠在最小程度上實現不太複雜的功能與服務。

ChangeLog

20221220-初稿

[技術筆記]極簡Docker+Nginx

前端工程師的極簡Docker+Nginx筆記