React 專案部署

語言: CN / TW / HK

React 專案部署

React 專案部署的方式有多種,下面將逐步介紹自己熟知的幾種部署方式

第一篇React系列就介紹React的部署,主要是因為簡單,容易操作。

為了讓程式碼可操作性。 這裡部署的React專案使用最簡單的一個React專案來部署。

建立React專案

安裝之前,相關環境的搭建就不詳細介紹了,網上資料很多

通過如下命令建立一個React 專案。

$ npm create-react-app helloreact

效果如下:

002_npx命令建立react專案.png 003_react專案建立成功的標誌.png

之後,按照提示資訊,切換到 helloreact目錄下,並且執行 npm start

為了保證我們部署如果出錯不是react專案本身的問題,我們先按照圖中顯示先啟動一下React專案,效果如下,則說明react專案可以正常訪問。我們也就可以將該專案使用者部署。

004_驗證建立的React專案是否可以正常訪問.png

專案已經建立好了,接下來我們可以將建立好,且可以正常執行的React專案進行部署了。

部署方式有多種,這裡將一一介紹。

通過node的靜態服務來部署

通過如下命令來安裝靜態伺服器

$ > npm install -g serve

這裡的-g 說明是全域性安裝,這樣之後部署其他React專案的時候,就不在需要重新下載安裝了。

005_通過npm安裝serve伺服器.png

通過如下命令來打包react 專案部署包

$> npm run build

006_打包React專案.png

打包之後,通過如下命令執行server 服務

$ serve -s build  -l 8080 007_通過serve命令來執行react專案.png

這裡要注意,需要通過-l 來指定埠號,如果不指定,訪問的埠號預設是3000

效果如下 007_通過serve命令來執行react專案.png

我們也可以通過 serve -s 來指定build 目錄的絕對路徑的方式來啟動react專案。

相關命令如下

$> serve -s /opt/program/react/study/helloreact/build -l 8080

通過指定build絕對路徑的方式來啟動react專案

在Ubuntu系統中通過serve部署React專案

遇到困難了:自己沒辦法將React的build打包檔案build.zip 傳送到ubuntu 系統。

先通過zip 命令將react專案中的build資料夾打包,相關命令如下

$> zip build.zip build

這裡之所以要通過zip命令打包成zip 包,主要是因為在centos或者ubuntu系統中zip 軟體預設是安裝好的。

接下來將build.zip 包上傳到linux系統。這裡選擇的是ubuntu系統。我這裡通過scp 命令來在兩個系統之間傳輸檔案。 相關命令如下

通過docker部署react專案

docker的安裝和使用這裡先不講解。 有問題可以參考:https://juejin.cn/post/7034535090445090830

008_通過指定build絕對路徑的方式來啟動react專案.png 這裡自己採用在外部打包好build生產包後,將該生產部署包複製到docker映象中,而不是將原始碼複製到docker映象中,在生成映象的過程中,去打包。

相關的Dockerfile檔案內容如下:

```

第一階段:拉取node映象來打包React專案

FROM node:14 as buildstep WORKDIR /app COPY build /app/build

第二階段:建立並執行Nginx伺服器,並把打包好的檔案複製貼上到伺服器資料夾中

FROM nginx:alpine COPY --from=buildstep /app/build/ /usr/share/nginx/html EXPOSE 80 CMD ["nginx","-g","daemon off;"] ```

利用Dockerfile 檔案生成映象檔案的命令如下.這裡的引數-t 可以每次生成映象之前,將之前的映象刪除。

$> docker build -t reat-web .

通過如下的命令來啟動映象

$> docker run -d -p 54321:80 react-web

可以改進完善的地方

在生成映象的時候,指定映象的版本號,而不是每次都是latest

同時舊的映象應該儲存。

變更記錄

| 型別 | 時間 | 內容 | | -- | ------------------- | ------------------------ | | 建立 | 2021年11月25日20:09:31 | 使用node的靜態伺服器來靜態部署React專案 | | | | | | | | |