├── .github └── workflows │ └── build.yml ├── Dockerfile ├── LICENSE ├── README.md ├── build-image.sh └── docker-compose.yml /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build-node: 7 | runs-on: ubuntu-latest 8 | strategy: 9 | matrix: 10 | node_version: ["16", "18", "20", "22"] 11 | steps: 12 | - uses: actions/checkout@v2 13 | - name: Build the Docker image 14 | env: 15 | NODE_VERSION: ${{ matrix.node_version }} 16 | DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }} 17 | DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }} 18 | ALIYUN_DOCKER_USERNAME: ${{ secrets.ALIYUN_DOCKER_USERNAME }} 19 | ALIYUN_DOCKER_PASSWORD: ${{ secrets.ALIYUN_DOCKER_PASSWORD }} 20 | run: bash build-image.sh 21 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | ARG NODE_VERSION=latest 2 | 3 | FROM node:${NODE_VERSION}-slim 4 | 5 | # system local config 6 | RUN true \ 7 | && ln -sf /usr/share/zoneinfo/PRC /etc/localtime 8 | 9 | RUN apt-get update \ 10 | && apt-get install -y \ 11 | # 命令行工具 12 | zsh curl wget vim git 13 | 14 | RUN wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh || true 15 | 16 | 17 | RUN true \ 18 | # npm china mirrors 19 | && npm config set registry https://registry.npmmirror.com || true \ 20 | # fix yarn permission denied https://github.com/nodejs/docker-node/issues/661 21 | && chmod a+x /usr/local/bin/yarn \ 22 | # yarn china mirrors https://github.com/nodejs/docker-node/issues/386 23 | && yarn config set registry https://registry.npmmirror.com || true \ 24 | # install pnpm 25 | && npm install -g pnpm \ 26 | && pnpm config set registry https://registry.npmmirror.com || true 27 | 28 | RUN apt-get clean autoclean 29 | 30 | RUN mkdir /workspace 31 | 32 | WORKDIR /workspace 33 | 34 | VOLUME /workspace 35 | 36 | EXPOSE 8080 37 | 38 | CMD ["zsh"] 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Jaquan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 前端开发环境 Docker 镜像 2 | 基于 Debain 版 linux，构建于 `Nodejs` 各大版本，包含 `node-sass` `yarn` `webpack` `zsh` `git` 等常用工具，开箱即用。 3 | 4 | 5 | 如果不需要作为开发环境而是将其作为命令行工具使用，参考以下用法： 6 | 7 | 8 | 如需指定 node 版本则在 image 后增加 tag ，NODE 版本列表 [10 - 16](https://hub.docker.com/r/springjk/webdev/tags?page=1&ordering=last_updated)，`例：springjk/webdev:10` 9 | 10 | **PS：工具式用法** 11 | 12 | 13 | ```bash 14 | cd {your-project-path} 15 | docker run --rm -v $(pwd):/workspace springjk/webdev:{node-version} sh -c {your-command} 16 | ``` 17 | 18 | 示例： 19 | 20 | ```bash 21 | docker run --rm -v $(pwd):/workspace springjk/webdev sh -c 'npm install'; 22 | 23 | docker run --rm -v $(pwd):/workspace springjk/webdev sh -c 'node -v && yarn install && yarn run build'; 24 | # 指定 node 版本 [10-16] 25 | docker run --rm -v $(pwd):/workspace springjk/webdev:14 sh -c 'node -v && yarn install && yarn run build'; 26 | ``` 27 | 28 | ## 安装 29 | 初次安装请根据以下步骤执行，熟悉 Docker 的用户可修改 Dockerfile 自行编译使用。 30 | 31 | **Setp0: 安装 Docker** 32 | 33 | * [Docker 官方地址](https://www.docker.com/products/overview) 34 | 35 | **Setp1: 下载镜像** 36 | 37 | ```bash 38 | docker pull springjk/webdev 39 | # 或指定版本 40 | docker pull springjk/webdev:16 41 | ``` 42 | 43 | **Setp2: 创建常驻式容器** 44 | 45 | ```bash 46 | docker run -itd -p :8080 -v :/workspace --name webdev --restart always springjk/webdev 47 | ``` 48 | 49 | > 请将 `` 与 `` 替换，restart=always 会使容器跟随 Dokcer 自动启动。 50 | 51 | * `work-port` - 浏览器访问端口，容器 8080 端口映射本机端口 52 | * `workspace-path` - 代码同步工作目录，Windows 版请确认该目录所在盘符已在 Docker 的配置中挂载 53 | 54 | 示例： 55 | 56 | ```bash 57 | docker run -itd -p 80:8080 -v d:/git_workspace:/workspace --name webdev --restart=always springjk/webdev 58 | docker run -itd -v /app:/workspace --name webdev --restart=always springjk/webdev 59 | 60 | ``` 61 | 62 | ## 使用 63 | 64 | ```bash 65 | docker exec -it webdev zsh 66 | ``` 67 | 68 | ## 删除 69 | 70 | ```bash 71 | docker rm -f webdev 72 | ``` 73 | 74 | ## 镜像内容 75 | 76 | ### 基础环境 77 | 78 | | 名称 | 说明 | 版本 | 79 | | --- | --- | --- | 80 | | [node](http://www.npmjs.com) | Node.js 基础环境 | 10-18 | 81 | 82 | ### 模块管理器 83 | 84 | | 名称 | 说明 | 版本 | 85 | | --- | --- | --- | 86 | | [npm](http://www.npmjs.com) | Node.js 官方推出的 JavaScript 包工具 | latest | 87 | | [yarn](https://yarnpkg.com) | Facebook 推出的开源 JavaScript 包工具 | latest | 88 | | [pnpm](https://pnpm.io/) | 新一代的开源 JavaScript 包工具 | latest | 89 | 90 | 91 | ### 系统工具 92 | 93 | | 名称 | 说明 | 版本 | 94 | | --- | --- | --- | 95 | | [curl](https://curl.haxx.se) | HTTP 请求工具 | latest | 96 | | [wget](http://www.gnu.org/software/wget/wget.html) | 文件下载工具 | latest | 97 | | [vim](http://www.vim.org) | 文本编辑器 | latest | 98 | | [git](https://git-scm.com) | 免费、开源的分布式版本控制工具 | latest | 99 | | [zsh](http://www.zsh.org) | 强大的 Shell 增强工具 | latest | 100 | | [oh-my-zsh](http://ohmyz.sh) | zsh 的扩展工具 | latest | 101 | 102 | ### 本地化 103 | 104 | * 时区修改为 `PRC` 105 | * npm 及相关二进制包源修改为阿里源 106 | * 添加 YARN、PNPM 107 | -------------------------------------------------------------------------------- /build-image.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | #### halt script on error 4 | set -xe 5 | 6 | git clone https://github.com/springjk/web-dev-docker.git 7 | cd web-dev-docker 8 | 9 | echo '##### Print docker version' 10 | docker --version 11 | 12 | echo '##### Print environment' 13 | env | sort 14 | 15 | 16 | #### Build the Docker Images 17 | 18 | echo build version is ${NODE_VERSION} 19 | 20 | 21 | docker build --build-arg NODE_VERSION=${NODE_VERSION} -t webdev . 22 | ##################################### 23 | 24 | # push to docker hub 25 | echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin 26 | 27 | docker tag webdev:latest ${DOCKER_USERNAME}/webdev:latest 28 | 29 | docker images 30 | 31 | docker push ${DOCKER_USERNAME}/webdev 32 | 33 | if [[ ${NODE_VERSION} != "latest" && ${NODE_VERSION} != "NA" ]]; then 34 | # push build version 35 | docker tag ${DOCKER_USERNAME}/webdev:latest ${DOCKER_USERNAME}/webdev:${NODE_VERSION} 36 | docker push ${DOCKER_USERNAME}/webdev:${NODE_VERSION} 37 | fi 38 | 39 | 40 | # push to aliyun docker hub 41 | echo "$ALIYUN_DOCKER_PASSWORD" | docker login -u "$ALIYUN_DOCKER_USERNAME" --password-stdin registry.cn-hangzhou.aliyuncs.com 42 | 43 | docker tag webdev:latest registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev:latest 44 | 45 | docker images 46 | 47 | docker push registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev 48 | 49 | if [[ ${NODE_VERSION} != "latest" && ${NODE_VERSION} != "NA" ]]; then 50 | # push build version 51 | docker tag ${DOCKER_USERNAME}/webdev:latest registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev:${NODE_VERSION} 52 | docker push registry.cn-hangzhou.aliyuncs.com/${DOCKER_USERNAME}/webdev:${NODE_VERSION} 53 | fi -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | webdev: 2 | build: ./ 3 | container_name: webdev 4 | ports: 5 | - "8080:8080" 6 | restart: always 7 | --------------------------------------------------------------------------------