1. **新增React專案(不在這邊多做解釋)**
1. **新增Dockerfile(最外層目錄)**
如圖
---

---
3. 新增一個檔案，檔案名稱叫.dockerignore
4. 在.dockerignore裡面寫不想放到image裡的檔案
我是只有寫node_modules
5. Dockerfile

FROM node:16.13.1 #選擇自己要的image模板(我是裝對應版本的node.js)
WORKDIR /app #創建一個資料夾(名字隨意)
COPY ./ /app/ #將目前位置的檔案都複製到剛剛新增的app資料夾中
RUN npm install #因為有複製package.json，所以直接install
RUN npm install -g serve #這邊額外安裝serve
RUN npm run build #打包這個專案
CMD [ "serve","-s","build" ] #使用serve -s build而不是npm start啟動
#serve -s build 會透過剛剛打包好專案去開啟一個靜態的serve
#我自己使用npm start 是可以成功的run跑起來的，但是推到google cloud run 上就會失敗
#使用serve -s build可以提供靜態serve成功解決我的問題

6. 這邊假設各位對於docker的指令是熟悉的，並且已經有連結到dockerhub的帳號，如果沒有可能要自己搜尋一下怎麼做(以下指令記得要把docker desktop打開，或是docker的服務要開啟)
8. cmd 進到放Dockerfile的目錄
9. docker build -t ***(你dockerhub的名字)/***(你要給這個image的名字)
10. build 成功後使用docker images 查看是否有對應的image(會有id)
11. 複製image的id
12. docker run -p 3000:3000(這是你想要在哪個端口運行) ***(你剛剛複製的id)
13. 成功之後，請檢查你localhost:3000(你設定的端口)是可以成功執行你的REACT專案的
14. 確認成功之後，就推到你的dockerhub
15. docker push (你dockerhub的名字)/(你的image name):latest(你的要選擇的tag，沒有打預設就是latest)
16. push 成功之後就是google cloud run 的部分
17. 首先先申請google cloud run 的帳號(這很簡單我就不講了)
18. [https://cloud.google.com/run?hl=zh-tw](https://)
19. 接這進到google cloud run 新增專案
20. 下載google cloud cli (下面文件提供兩種方式)
21. https://cloud.google.com/sdk/docs/install
23. 第一種直接下載他幫你弄好的sdk shell
24. 第二種用自己的powershell執行他的命令，我是用它弄好的sdk shell
25. 下載安裝完成後，開啟sdk shell
26. 執行以下指令
27. `gcloud init` 初始化
28. ` gcloud config set project PROJECT_ID` project id 會在你剛剛創建的project可以看到
30. `gcloud auth configure-docker` 連接docker
31. 之後就可以直接deploy了
32. `gcloud run deploy ***(你這個服務要叫的名字) --image ***(你的dockerhub名稱/***(你剛剛docker push的image name):latest(你要選擇的tag)`
33. 執行後他會問你要佈在哪個伺服器，我是選第一個香港的(asia-east1)
34. 然後會問你要不要開起所有人都可以使用這項服務，我是選開啟
打y或n就好
35. 執行完會給你url或是你也可以到你的google cloud run 裡面看到這個服務的網站