docker 搭建前端開發環境不完全指南

airborne007 發布于2019-08-23 11:44 / 2147人閱讀

摘要：本文需要對和現代前端開發模式有一定了解入門可以參考入門教程不同系統請自行安裝環境初始化項目目前網上找到的搭建前端開發環境的資料都比較老了所以有了此篇文章創建項目安裝依賴的過程可以直接停止因為我們可以在環境中安裝依賴在中安裝依

本文需要對docker 和現代前端開發模式有一定了解, docker入門可以參考 docker入門教程
不同系統請自行安裝docker環境

初始化項目

目前網上找到的docker 搭建前端開發環境的資料都比較老了, 所以有了此篇文章

docker --version
Docker version 17.09.1-ce, build 19e2cf6

創建項目:

create-react-app my-project-react

安裝依賴的過程可以直接ctrl-c停止, 因為我們可以在docker環境中安裝依賴

在docker 中安裝依賴

拉取docker image, 直接采用node鏡像

docker pull node:8.11.4-stretch

下載完成后docker image ls可以查看已經在本地image:

cd my-project-react
docker run  -v `pwd`:/workspace -w /workspace --privileged=true node:8.11.4-stretch yarn

命令具體下文解釋
install速度慢的, 可以添加.npmrc 和 .yarnrc文件

registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

在docker中運行

cd my-project-react

docker run -it -v `pwd`:/workspace -w /workspace -p 8000:8000 --privileged=true node:8.11.4-stretch yarn start

命令比較長, 逐段解釋
docker run -it node:8.11.4-stretch
以node:8.11.4-stretch這個image 運行 docker container, -it 表示進入交互式終端;

-v `pwd`:/workspace
稍微熟悉shell腳本的就知道, pwd代表當前目錄,pwd反引號代表執行pwd命令, 并輸出, 作用就是將當期項目目錄掛載到docker 容器中的 /workspace 目錄;

-w /workspace --privileged=true
-w 指定工作目錄為 /workspace(容器中), --privileged=true, 以防萬一, 獲取容器的root權限;

-p 8000:8000
將運行中容器的8000端口(項目運行端口)映射到主機的8000端口, 注意, 這兩個端口必須一致, 否則熱更新有問題.本地localhost:8000無法打開網頁, 請先吧webpack-dev-server中host配置改為0.0.0, 再查看本機8000端口占用情況;

yarn start
以開發模式運行項目, 命令根據自己項目實際情況而定.

當然運行run命令也可以不加上 -it 參數, 直接運行, 這樣的缺點是無法直接ctrl-c停止運行, 停止container 需要使用 docker container stop containerId命令

在docker中build

以上步驟都ok, build 過程就很簡單了, 只需要把 yarn start 命令改成yarn build 即可, 也不需要端口.

docker run -v `pwd`:/workspace -w /workspace  --privileged=true node:8.11.4-stretch yarn build

云服務器 GPU云服務器 docker搭建開發環境前端開發環境搭建 docker環境搭建 docker 打造開發環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97379.html

docker 搭建前端開發環境不完全指南

摘要：本文需要對和現代前端開發模式有一定了解入門可以參考入門教程不同系統請自行安裝環境初始化項目目前網上找到的搭建前端開發環境的資料都比較老了所以有了此篇文章創建項目安裝依賴的過程可以直接停止因為我們可以在環境中安裝依賴在中安裝依本文需要對docker 和現代前端開發模式有一定了解, docker入門可以參考 docker入門教程不同系統請自行安裝docker環境初始化項目目前網上找到...

AnthonyHan 2019-06-28 16:36 評論0 收藏0
網站部署

摘要：就鹿晗宣布戀情導致微博宕機事件淺談大型網站高可用性架構中午吃飯刷著刷著微博發現微博突然掛了。用戶在使用瀏覽器訪問一個網站時需要先通過協議向服務器發送請求，之后服務器返回文件與響應信息。 webpack：從入門到真實項目配置自從出現模塊化以后，大家可以將原本一坨代碼分離到個個模塊中，但是由此引發了一個問題。每個 JS 文件都需要從服務器去拿，由此會導致加載速度變慢。Webpack 最主...

endless_road 2019-06-24 17:57 評論0 收藏0
CI Weekly #3 | 關于微服務、Docker 實踐與 DevOps 指南

摘要：圍繞軟件工程效率提升進行一系列技術內容分享，包括國內外持續集成持續交付，持續部署自動化測試等實踐教程工具與資源，以及一些工程師文化相關的程序員。劃分了數據庫日志安全監控配置管理云服務等個大類，個工具。 CI Weekly 圍繞『軟件工程效率提升』進行一系列技術內容分享，包括國內外持續集成、持續交付，持續部署、自動化測試、 DevOps 等實踐教程、工具與資源，以及一些工程師文化相關...

monw3c 2019-06-28 17:46 評論0 收藏0
手把手教你搭APM之Skywalking搭建指南(支持Java/C#/Node.js)

摘要：通過跟蹤請求的處理過程，來對應用系統在前后端處理服務端調用的性能消耗進行跟蹤，關于的介紹可以看這個鏈接，大規模分布式系統的跟蹤系統作者刀把五鏈接來源知乎著作權歸作者所有。手把手教你搭APM之Skywalking 前言什么是APM?全稱:Application Performance Management 可以參考這里: 現代APM體系，基本都是參考Google的Dapper（大規模...

ingood 2019-08-19 11:13 評論0 收藏0
基于 Docker 搭建 TensorFlow 開發環境

摘要：它是目前最流行的容器解決方案。提供一次性的環境。端駐守在后臺，稱之為。入門指南簡介是一個使用數據流圖進行數值計算的開放源代碼軟件庫。學習資料官網中文社區官方文檔中文版極客學院什么是數據流圖數據流圖用結點和線的有向圖來描述數學計算。轉載需經本人同意且標注本文原始地址：https://zhaomenghuan.github.i... 前言第一次聽到 Docker 這個詞，是兩年前找實...

tianhang 2019-06-28 16:27 評論0 收藏0