文章彙整

Magento 1 Vue Storefront 環境建置(上篇)

Astral WebBy Astral Web 4 months agoNo Comments
首頁  /  Magento  /  Magento 1 Vue Storefront 環境建置(上篇)

Vue Storefront是以Vue開發的前端的應用程式,他支援手機、平板與電腦,他支援後端magento1、magneto2、CoreShop、BigCommerce、WooCommerce,未來會支援commercetools、Shopify。

Vue Storefront分成Vue Storefront與 Vue Storefront Api,Vue Storefront是網站前端是以Vue.js寫成由nodejs提供web服務並支持SSR,Vue Storefront Api 是以javascript寫成一樣也由nodejs提供web服務。

Vue Storefront發送請求Vue Storefront Api決定連結之後端,並處理資料來源,有可能來自magento端或cache或elasticsearch或是其他平台。

Vue Storefront的環境建置有兩種:你可以選擇使用docker與cli與是手動灌所有的程式。我們先以手動安裝的方式來進行,有助於了解整個架構。

更新軟體的最新資訊及列表與安裝CURL與GIT等等會用到

apt-get update
apt-get install curl
apt-get install git

1.安裝nodejs與yarn

curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt-get install -y nodejs
npm install -g yarn

2.安裝redis

apt-get install redis-server

3.安裝Elasticsearch5.6並開啟預設PORT為9200

apt-get install openjdk-8-jre
curl -L -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.6.16.deb
dpkg -i elasticsearch-5.6.16.deb
/etc/init.d/elasticsearch start

4.安裝nginx與imagemagick

apt-get install imagemagick
apt-get install nginx

5.配置nginx的設定檔案,本機請把SSL相關刪除,並改成監聽80prot

curl https://raw.githubusercontent.com/DivanteLtd/vue-storefront/develop/docs/guide/installation/prod.vuestorefront.io > /etc/nginx/sites-available/prod.vuestorefront.io

ln -s /etc/nginx/sites-available/prod.vuestorefront.io /etc/nginx/sites-enabled/prod.vuestorefront.io
//設定之後別忘了重啟 nginx
/etc/init.d/nginx restart

範例

server {
        listen 80;
        server_name prod.vuestorefront.io;
      
        add_header Strict-Transport-Security "max-age=31536000" always;
        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection "1; mode=block";
        add_header X-Robots-Tag none;

        gzip on;
        gzip_proxied any;
        gzip_types
                text/css
                text/javascript
                application/javascript
                application/json
		text/xml
                text/json;

        location / {
                proxy_pass http://localhost:3000/;
        }

        location /assets/ {
                proxy_pass http://localhost:3000/assets/;
        }

		location /api/ {
                proxy_pass http://localhost:8080/api/;
        }

		location /graphql {
                proxy_pass http://localhost:8080/graphql;
        }

		location /img/ {
                proxy_pass http://localhost:8080/img/;
        }
}

 

到目前為止我們已經完成基本環境的建置與設定,下一章我們將講解Vue Storefront與Vue Storefront Api的建置,大家可不要錯過囉!我們下次見~有任何問題歡迎聯絡我們

也別忘了追蹤歐斯瑞的粉絲團IG,更是別忘了訂閱我們的電子報,就能隨時掌握第一手新知分享呦!

 

文章參考:

https://docs.vuestorefront.io/guide/installation/production-setup.html#nginx

圖片來源

https://docs.vuestorefront.io/guide/general/introduction.html#what-is-vue-storefront

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Categories:
  MagentoMagento開發

留下回應

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

請到您的信箱確認,即可完成訂閱。