【vuejs項目部署】使用docker基於daocloud自動化部署到本身的主機

時間 2019-11-09

標籤 vuejs項目部署使用 docker 基於 daocloud 自動化部署本身主機欄目 Docker 简体版

原文原文鏈接

在前端開發中，部署項目是咱們常常發生的事情

若是在你的公司中，項目部署須要你來負責，怎麼優雅無痛的讓你的項目自動上線
在以前的文章中，寫過幾篇關於項目上線的方式，你們能夠翻閱這個專欄去看。
今天主要講怎麼優雅的部署vue項目，使用docker容器，配合git webhook 鉤子，當咱們觸發到git hook 事件，就自動化部署。這裏固然建議是 tag事件。

嘿，你想快速get這門技能？

你能夠的！

在這裏我已經寫完了項目的基本的文件，你只須要把這個項目複製到你的vue項目中便可！

項目地址 docker vue項目php

使用說明

git clone https://github.com/devdocker/dao-vue

cp -r dao-vue vueitem

vueitem 是你的vue項目地址

此時你項目文件結構

而後去 daocloud.io 官網新建一個基於這個項目的項目

若是你不瞭解 daocloud.io ，不要緊，去註冊，看文檔，從此會寫關於daocloud.io詳細文檔。

若是你用過daocloud ，請去建立一個項目，編譯發佈，設置觸發條件，自動化發佈到你的主機。
固然部署到你的服務器上後，把端口寫死，不要動態的。html

而後可使用nginx upstream proxy_pass 反向代理來解決跨域問題

配置以下前端

upstream webfenxi {
        server 127.0.0.1:8083; # 這是服務器使用docker啓動的端口
}
server
    {
        listen 80;
        #listen [::]:80;
        server_name webfenxi.com ; # 這是綁定的本身的域名
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/webfenxi.com;

        include other.conf;
        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php.conf;

        location / {
                proxy_set_header X-Real-Ip $remote_addr;
                proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;

                proxy_set_header X-Nginx-Proxy true;
                proxy_pass http://webfenxi;  # 代理地址
                proxy_redirect off;
               # try_files $uri $uri/ /index.html;
             }

          location /v1/ {
             proxy_pass http://api.xxxx.com/v1/;  #代理的接口，解決跨域問題
          }

          location ~ /.well-known {
              allow all;
          }

          location ~ /\.
          {
              deny all;
          }

          access_log  /home/wwwlogs/webfenxi.com.log;
      }