File tree Expand file tree Collapse file tree 3 files changed +27
-1
lines changed Expand file tree Collapse file tree 3 files changed +27
-1
lines changed Original file line number Diff line number Diff line change 1+ FROM nginx
2+ COPY ./dist/ /usr/share/nginx/html
Original file line number Diff line number Diff line change @@ -39,3 +39,26 @@ $ npm start # Compile and launch
3939| ` lint:fix ` | 檢查所有的 js 檔案有沒有符合 coding style ,如果是一些簡單的錯誤就會嘗試修復 |
4040| ` deploy ` | 編譯整個網站成品後,上傳至Github靜態頁面,https://[ Github 帳號] .github.io/[ Repositories Name] /#/ |
4141
42+
43+ ## Docker
44+
45+
46+ 如果想要把專案 build 到 docker 上面跑,請執行這條命令
47+ ```
48+ npm run build:docker
49+ ```
50+ 輸入完命令之後會建立 docker image 名稱為 ` reactdocker `
51+
52+ ![ ] ( https://i.imgur.com/LISz99c.png )
53+
54+ 我們可以透過以下指令把映像檔跑起來
55+
56+ ```
57+ docker run --name reactmaker -d -P reactdocker
58+ ```
59+
60+ 因為我是用` -P ` 參數自動分配port,所以跑起來之後輸入 ` docker ps ` 察看系統給我哪個 port
61+
62+ ![ ] ( https://i.imgur.com/Fww1ncw.png )
63+
64+ 接著就可以在瀏覽器輸入localhost:32768看到我們包好的網頁了
Original file line number Diff line number Diff line change 5757 "lint" : " eslint ./src" ,
5858 "lint:fix" : " eslint ./src --fix" ,
5959 "start" : " webpack-dev-server --open --env dev" ,
60- "deploy" : " npm run dist && gh-pages -d dist"
60+ "deploy" : " npm run dist && gh-pages -d dist" ,
61+ "build:docker" : " npm run dist && docker build -t reactdocker ."
6162 }
6263}
You can’t perform that action at this time.
0 commit comments