探索Docker在前端開發中的應用一：背景

Docker with node

Docker是一項具備劃時代意義的開源項目，它在服務端開發以及部署中大放異彩，本着對優秀技術的不斷學習態度，很是建議將Docker做爲你下一項學習的技術。

本文做爲Docker在前端中應用的背景篇章，會對Docker及其優點作精簡的介紹，而後列舉一些前端開發、測試、部署過程當中遇到的問題，但願能夠藉助Docker優雅地解決。

場景

1、在開發過程當中，有沒有遇到過如下場景：

1. 須要本身配置proxy解決跨域請求問題
2. 接手一個新項目以後，想要跑起來，並無想象中的那麼流暢，除了前端依賴，還要配置若干系統內容

   • npm i
   • npm start
   • Error XXX服務未配置
3. 一個Node服務(好比SSR、打印服務、普通的數據處理服務)，在部署的時候，腳本控制權並不在前端手中，容易出現一些配合問題
4. 後端項目須要在本地運行，你須要安裝所有的後端環境，而後這些環境在你開發下一個項目的時候，你還在考慮如何能清理乾淨。

   • MySql
   • MongoDb
   • Java
   • PHP
   • Redis
   • Nginx
   • ...

2、在搭建團隊基礎服務過程當中，有沒有遇到過如下場景：

1. 須要在服務器上部署一個項目要安裝若干的基礎服務
2. 你發現系統上已經存在了舊版本的服務，你不肯定升級該服務，會影響系統上的哪些應用，可是不升級，你的應用不支持安裝

3、在學習過程當中，是否有過如下場景：

1. 搭建一個普通的博客，都須要花費大量時間安裝一些基礎服務：

   • PHP環境
   • Apache
   • 各類數據庫服務
2. 若是有一天你不須要了，還要花費時間去清理
3. 項目開發完以後，還要考慮服務端的環境問題
4. 你的一個Demo項目，但願在任何服務器都能快速部署

需求總結

咱們將咱們的需求彙總一下，咱們但願的功能有：

1. 開發所需的非前端環境一鍵配置
2. 所需的服務方便配置、簡單移除
3. 項目開發配置完成後，方便部署在不一樣平臺而且運行效果一致
4. 其餘人接手項目後，可以快速搭建好環境，而且運行起項目

Docker介紹

Docker的官方化介紹，能夠在其官網[1]中瞭解到，對於咱們來講Docker就是一個將項目運行所需全部環境打包到一個虛擬化容器中的工具， 同時，藉助Docker，咱們也能夠很是方便的獲取所需的依賴環境。

舉個例子：個人項目須要在本地安裝MySQL服務。

只須要在命令行使用Docker使用mariadb鏡像啓動一個容器便可。

docker run \
--name some-mariadb --rm \
-p 3306:3306 -e MYSQL_ROOT_PASSWORD=password \
mariadb:latest
複製代碼

使用用戶名root，密碼：password便可成功鏈接MySQL。

docker mysql

若是想中止，直接按下Ctrl+\，服務又從電腦中移除，很是乾淨。

★

備註：爲什麼這裏不是Ctrl+C來終止命令，能夠參閱本文[3]

」

該命令中有幾個參數具體分享一下：

• --rm 容器結束時，移除container，與之相對的有-d
• -p 映射容器端口到主機端口，主機端口:容器端口
• -e Env 環境變量
• -d --detach 後臺運行，和--rm不能同時使用
• -v 掛載數據卷，bind的方式

接着啓動數據庫的例子，咱們會發現，在結束掉服務後，下次再啓動會發現數據全沒了，咱們若是但願將本身的數據保存在本地，那麼能夠增長-v參數。

docker run \
--name some-mariadb --rm \
-p 3306:3306 -e MYSQL_ROOT_PASSWORD=password \
-v /you/data/path:/var/lib/mysql
mariadb:latest
複製代碼

這樣本地路徑/you/data/path就會將MySQL產生的數據持久化保存了，每次啓動MariaDB都會還原以前的數據了。

以上咱們便體驗了Docker的一大特色快速部署，即快速將MySQL服務部署到你的電腦上，不管是Windows/OSX/Linux系統，都是一段命令搞定，大大節省了時間和精力。

這樣在咱們的開發服務器上，只須要存儲一些配置和數據文件，執行文件徹底交由Docker管理。

舉個例子：我須要使用Nginx作一個接口轉發

咱們須要在開發中須要用到該接口：https://yapi.thisjs.com/mock/21/antd/games，我須要使用nginx對其進行一些代理配置，這樣咱們只須要建立一個.conf文件，而後使用Docker啓動一個Nginx掛載該conf文件到conf.d/目錄下便可。

# proxy.conf
複製代碼server { listen 8080; location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header Cache-Control private; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; proxy_pass yapi.thisjs.com/mock/21/ant… } } 複製代碼

在配置目錄下執行該命令

docker run \
--name proxy-server \
-v "$(pwd)/proxy.conf":/etc/nginx/conf.d/proxy.conf:ro \
-d -p 8080:8080 \
nginx
複製代碼

這時候，咱們便可訪問 http://localhost:8080/games，便可獲取到所須要的數據。

當咱們開發/調試結束後，若是須要將nginx容器中止並移除能夠參考如下命令。

# 查看正在運行中的container
docker ps
# 中止名稱爲 proxy-server 的container
docker stop proxy-server
# 刪除名稱爲 proxy-server 的container
docker container rm proxy-server
複製代碼

至此，Docker已經基本知足了咱們的兩個需求：

1. 開發所需的非前端環境一鍵配置
2. 所需的服務方便配置、簡單移除

可是尚未徹底達到，咱們但願所需環境一鍵配置，而不是一鍵又一鍵的配置，所以但願能在下一個篇章裏介紹Docker更輕鬆維護服務的相關內容。

安裝Docker

看到這，你可能尚未安裝Docker，其實Docker安裝很是的簡單。好比Mac，只須要下載鏡像而後直接安裝便可：

安裝Docker

其餘系統的Docker安裝都很是的簡單，能夠參考這篇文章介紹：

安裝 Docker

安裝完以後

安裝完以後，不如嘗試啓動一個普通的前端項目。

docker run \
-p 80:80 --name react-demo \
--rm \
mrxf/craantdbasic:latest
複製代碼

這是一個基於create react app的前端項目，啓動以後直接訪問 localhost便可看到頁面。

結語

不能爲了用Docker而用Docker，不然會出現Docker也成了咱們開發中的一項沒有必要的服務。遇到問題，仍是要之前端的方式解決。

如下以2個場景進行分析：

1.開發中的代理請求

若是是單一的代理請求來解決跨域問題的場景，那麼最佳方案是之前端的方案解決

在現代前端框架腳手架中都集成了很是方便的proxy方案，以Create React App[2]爲例，就提供了http和https代理功能，在未eject的項目的package.json文件中增長一項配置便可。

"proxy": "http://url.to.poxy",
複製代碼

Creact React App在執行eject以後，與其餘基於Webpack的項目均可以經過配置webpack.config.js，在devServer中新增proxy便可。

proxy: {
    '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
    }
}
複製代碼

只有在遇到比較特殊的狀況下，咱們纔會去配置Nginx

1. 項目請求多個URL，咱們須要將某些地址作轉發，以阻止其訪問原來的地址。
2. 直播數據流地址

對於場景1，咱們須要Nginx + Hosts的配合來實現。首先修改Hosts將原來的訪問地址轉發到本地，而後使用nginx來將其指向目標地址。

{
    listen     80;
    server_name api.serverurl.com;
    location / {
        ...其餘配置...
        proxy_pass http://127.0.0.1:4300;
    }
}
複製代碼

2.前端項目部署問題

前端線上部署到底要不要用Docker？純靜態前端項目徹底不須要，由於前端項目更依賴網絡資源和瀏覽器資源，所以常規場景下，CDN纔是純靜態項目的部署方案。

附錄

[1]Docker: Empowering App Development for Developers

[2]Proxying API Requests in Development

[3]Ctrl+C does not kill mysqld