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

技術應用

Magento 1 Vue Storefront 環境建置（上篇）