文章彙整

在正式環境設定Magento PWA Venia

Astral WebBy Astral Web 10 months agoNo Comments
首頁  /  Magento  /  Magento2 開源版  /  在正式環境設定Magento PWA Venia

在開發或測試新功能後,對於在開發者模式下的任何特定Venia環境中,下一步就是要部署正式環境 ,來充分利用Magento前端的客製化及增強程式碼。

由於它的屬性與動態性質是基於客製要求及測試,這篇文章將不涵蓋任何標準化下的CI/CD的過程。

1.安裝Venia

1.1安裝前

需要檢查主機上NodeYarn的版本。以下為版本的最低需求。

node -v (Should be 10.16.3 or higher)

yarn -v (Should be 1.13.0 or higher)

如果主機的版本比較舊,就需要更新或是重新安裝。

想了解更多有關於具體操作系統的安裝步驟,請參考以下連結:

https://nodejs.org/en/

https://yarnpkg.com/getting-started/install

1.2安裝

  1. 在本地資料夾中作為根目錄,建立初始項目並且回答問題:

    # yarn create @magento/pwa

  2. 啟用開發伺服器:

    # yarn watch @magento/pwa

 

在這之後,開發伺服器就可以被使用了; 不過建議創建一個自定義的主機名稱與SSL證明,特別是若您有在同個本地環境中開發多個環境。

# yarn build create-custom-origin ./

之後,每次啟用開發伺服器時,就會使用獨特且自行定義的主機名稱和SSL憑證。

如果開發需要一個非常特別的主機名稱,可以透過CUSTOM_ORIGIN_EXACT_DOMAIN 的設定改變數值在.env資料夾中更改它。

備註:每次修改主機名稱時,都需要執行create-custom-origin指令。

2.運作正式環境模式

在測試與開發所有必要的功能後,現在可將Venia設定為正式環境模式,如下方所示:

  1. 設定.env 參數
    .env資料夾中的以下參數需要被設定後,才能正常執行正式環境模式。
    STAGING_SERVER_PORT=xxxx —> for customizing the port numberCUSTOM_ORIGIN_EXACT_DOMAIN=”xxxxx” → for customizing the hostname
  2. 編寫
    在執行正式環境模式前,需要先將程式碼編寫到build資料夾中。

    # yarn run build
  3. 執行
    最後正式環境模式就可以開始了。

    # yarn start

     

3. 設定NGINX

也建議部署一個網路伺服器來加強安全性和性能。

通常ReactJs-based專案搭配NGINX運作會比較好。需要依照下列敘述:

  1. Static vs Proxy mode(Static vs Proxy模式):NGINX可以設定成static或proxy模式嗎?這會取決於NGINX是處理整個需求或只是作為伺服器和另一個軟體橋樑。
  2. Firewall Settings(防火牆設定):確保所有Venia和NGINX的配置端,都可從任何安全客戶端安全訪問。
  3. SSLCertificate:根據預設,Venia需要使用https。
  4. URL rewrite(URL複寫)不一定是必要的;會取決於NGINX和伺服器的配置。

有關如何遵守上述清單的完整參考資料,請參照下方連結。由於NGINX配置是有關於系統操作方面,所以不會涵蓋在本篇文章中介紹。

NGINX參考資料:

https://blog.devgenius.io/using-nginx-to-serve-react-application-static-vs-proxy-69b85f368e6c

https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-configure-nginx-for-angular-and-reactjs/

以上就是有關於在正式環境模式下設定Magento PWA Venia的介紹,想了解更多或學習各方面的新知,那就記得要追蹤歐斯瑞FB粉絲團IG,也別忘了訂閱我們電子報,隨時掌握第一手最新分享,有任何問題也歡迎隨時與我們聯繫呦!

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  Magento2 開源版MagentoMagento2 商業版後端開發網站技術與設計

留下回應

你的電子郵件地址不會被公開.