diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..fb155b7 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,4 @@ +**/node_modules +**/dist +**/outputs +**/.git diff --git a/.env b/.env new file mode 100644 index 0000000..41c8f66 --- /dev/null +++ b/.env @@ -0,0 +1,7 @@ +SHARED_WORKSPACE_HOST=workspace +SHARED_WORKSPACE_CONTAINER=/opt/workspace +# Dockerコンテナ起動時に使用するツールがあるディレクトリ +# DOCKER_TOOLS_HOST=docker/dev_nodejs/tools + +APPNAME=dev_nodejs +NODE_VERSION=20.13.1 \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0a28471 --- /dev/null +++ b/.gitignore @@ -0,0 +1,144 @@ +# Mac +.DS_Store + + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +# .env # Dockerコンテナ起動に使用するため一旦コメントアウト． +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# python +__pycache__/ +.venv/ + +# Docker +## workspace下に置いたソースをコミットしないようにする +workspace/* +!workspace/README.md + diff --git a/README-PJ.md b/README-PJ.md new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 14a1594..3bc5af6 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,102 @@ # docker_sandbox Dockerコンテナを使った開発等ができるように整備する汎用レポジトリ． + +## 使い方：共用のDockerfile等を追加・修正する人 +基本的にdevブランチから共用のDockerfileを追加・修正するためのブランチを切って作業すること +1. devブランチからブランチ`feature/{任意のブランチ名}`を切る +1. ブランチ`feature/{任意のブランチ名}`で，追加・修正をするディレクトリ`docker/{Dockerサービス名}/`の中の共用のDocker環境の設定ファイル等に対して作業する +1. 必要あれば`docker/{Dockerサービス名}/README.md`を作成・更新する +1. 作業が完了したらブランチ`dev`へのプルリクを投げる +1. 必要あればブランチ`dev`のブランチ`main`へのプルリクを投げる + +## 使い方：用意済みのDockerfileを使用してPJ用のDocker環境を作成・修正する人 +基本的にmainブランチからPJごとのDocker環境設定するためのブランチを切って作業すること +1. mainブランチからブランチ`pj_{PJ名}_{Docker環境名}`を切る +1. ブランチ`pj_{PJ名}_{Docker環境名}`で，PJの開発やステージングテストに必要なDocker環境の設定等をしてpushしておく +1. 必要あれば`README-PJ.md`で用意したPJ用のDocker環境の使い方を記載する + +## 使い方：用意済みのPJ用のDocker環境を使用する人 +1. 用意されたブランチ`pj_{PJ名}_{Docker環境名}`をクローンする +1. `README-PJ.md`に記載されたDocker環境の使い方を参考にDocker環境を起動して作業する + +## Appendix：構成 +``` +├ docker_sandbox/ + ├ docker/ + ├ {Dockerサービス名}/ + ├ Dockerfile + ├ README.md [`docker-compose.yml`・`.env`・`.dockerignore`のサンプル，起動手順を記載] + ├ dev_nodejs/ [例：NodeJS(バージョン選択可)開発環境] + ├ Dockerfile + ├ README.md + ├ prd_centos/ [例：CentOS(バージョン選択可)本番想定サーバ] + ├ Dockerfile + ├ README.md + ├ postgresql/ [例：PostgreSQL(バージョン選択可)] + ├ Dockerfile + ├ README.md + ├ workspace/ + ├ README.md + ├ [git cloneするなどしてソースを用意する] + ├ docker-compose.yml + ├ .env +``` + +## Appendix：Gitflowイメージ +- 登場人物(ブランチ) + - ブランチ`main`：用意済みDockerfileを使用する開発者がPJにおけるDocker環境を用意するための元ブランチ + - ブランチ`dev`：本レポジトリの共用部分に関する開発ブランチ + - ブランチ`feature/setup_common_docker_dev_nodejs`：NodeJS開発に関する共用のDockerfileを追加するブランチ + - ブランチ`pj_hoge_dev_nodejs`：PJ「hoge」におけるNodeJS開発のためのDocker環境を整備しPJ「hoge」の開発メンバに展開するブランチ + - ブランチ`feature/setup_common_docker_postgresql`：PostgreSQL開発に関する共用のDockerfileを追加するブランチ + - ブランチ`pj_fuga_dev_nodejs`：PJ「fuga」におけるNodeJS開発のためのDocker環境を整備しPJ「fuga」の開発メンバに展開するブランチ + - ブランチ`pj_fuga_dev_postgresql`：PJ「fuga」におけるPostgreSQL開発のためのDocker環境を整備しPJ「fuga」の開発メンバに展開するブランチ + - ブランチ`feature/fix_common_docker_dev_nodejs`：NodeJS開発に関する共用のDockerfileを修正するブランチ +```mermaid +gitGraph + commit + branch dev + checkout dev + commit + commit + branch feature/setup_common_docker_dev_nodejs + checkout feature/setup_common_docker_dev_nodejs + commit + commit + commit + checkout dev + merge feature/setup_common_docker_dev_nodejs + checkout main + merge dev + branch pj_hoge_dev_nodejs + checkout pj_hoge_dev_nodejs + commit + commit + checkout dev + branch feature/setup_common_docker_postgresql + commit + checkout dev + merge feature/setup_common_docker_postgresql + checkout main + merge dev + checkout main + branch pj_fuga_dev_nodejs + checkout pj_fuga_dev_nodejs + commit + checkout main + branch pj_fuga_dev_postgresql + checkout pj_fuga_dev_postgresql + commit + commit + checkout dev + branch feature/fix_common_docker_dev_nodejs + checkout feature/fix_common_docker_dev_nodejs + commit + checkout dev + merge feature/fix_common_docker_dev_nodejs + checkout main + merge dev + checkout pj_fuga_dev_nodejs + merge main + commit +``` \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..e1ce33e --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,23 @@ +version: "3" + +services: + dev_nodejs: + build: + context: . + dockerfile: ./docker/dev_nodejs/Dockerfile + args: + APPNAME: ${APPNAME} + SHARED_WORKSPACE_HOST: ${SHARED_WORKSPACE_HOST} + SHARED_WORKSPACE_CONTAINER: ${SHARED_WORKSPACE_CONTAINER} + # DOCKER_TOOLS_HOST: ${DOCKER_TOOLS_HOST} + NODE_VERSION: ${NODE_VERSION} + image: ${APPNAME} + container_name: ${APPNAME} + ports: + # フロントエンドlocalhost用 + - 8001:8001 + # Storybook用 + - 8106:8106 + volumes: + - ./${SHARED_WORKSPACE_HOST}:${SHARED_WORKSPACE_CONTAINER} + tty: true diff --git a/docker/dev_nodejs/Dockerfile b/docker/dev_nodejs/Dockerfile new file mode 100644 index 0000000..363dd7f --- /dev/null +++ b/docker/dev_nodejs/Dockerfile @@ -0,0 +1,26 @@ +ARG NODE_VERSION + +FROM node:${NODE_VERSION} + +ARG APPNAME +ARG SHARED_WORKSPACE_HOST +ARG SHARED_WORKSPACE_CONTAINER +# ARG DOCKER_TOOLS_HOST + +# COPY ./${DOCKER_TOOLS_HOST} /opt/docker/tools + +RUN apt-get update \ + && apt-get install -y \ + vim \ + wget \ + curl \ + git \ + && echo ${NODE_VERSION} \ + && node --version \ + && npm --version \ + && npx --version \ + # npmが古い場合があるので再インストール + && npm install -g npm \ + && npm --version + +WORKDIR ${SHARED_WORKSPACE_CONTAINER} diff --git a/docker/dev_nodejs/README.md b/docker/dev_nodejs/README.md new file mode 100644 index 0000000..efb4c9e --- /dev/null +++ b/docker/dev_nodejs/README.md @@ -0,0 +1,120 @@ +# Dockerコンテナ`dev_nodejs` + + +## 準備 +下記ファイルを，コピペして適宜設定値変更する． + +#### `.env` +``` +SHARED_WORKSPACE_HOST=workspace +SHARED_WORKSPACE_CONTAINER=/opt/workspace +# Dockerコンテナ起動時に使用するツールがあるディレクトリ +# DOCKER_TOOLS_HOST=docker/dev_nodejs/tools + +APPNAME=dev_nodejs +NODE_VERSION=20.13.1 +``` +- `SHARED_WORKSPACE_HOST`：Dockerコンテナがマウントするホスト側のディレクトリ + - 基本変更不要 + - 例：`workspace` +- `SHARED_WORKSPACE_CONTAINER`：Dockerコンテナがマウントするコンテナ側のディレクトリ + - 基本変更不要 + - 例：`/opt/workspace` +- `DOCKER_TOOLS_HOST`：Dockerイメージビルド時に使用するツールがある場合に使用するディレクトリ(ホスト・コンテナ共通) + - 今回は使わないのでコメントアウト +- `APPNAME`：コンテナ名・イメージ名に使用する名称 + - 基本変更不要 +- `NODE_VERSION`：NodeJSのバージョン + - 公式のStable/Newest：https://nodejs.org/ja/download/ + - DockerにおけるNodeJSイメージ一覧：https://hub.docker.com/_/node + - NodeJSのバージョン一覧：https://nodejs.org/download/release/ + +#### `.dockerignore` +``` +**/node_modules +**/dist +**/outputs +**/.git +``` +- 基本上記のコピペでOK + +#### `docker-compose.yml` +``` +version: "3" + +services: + dev_nodejs: + build: + context: . + dockerfile: ./docker/dev_nodejs/Dockerfile + args: + APPNAME: ${APPNAME_DEV} + SHARED_WORKSPACE_HOST: ${SHARED_WORKSPACE_HOST_DEV} + SHARED_WORKSPACE_CONTAINER: ${SHARED_WORKSPACE_CONTAINER_DEV} + # DOCKER_TOOLS_HOST: ${DOCKER_TOOLS_HOST_DEV} + NODE_VERSION: ${NODE_VERSION} + image: ${APPNAME_DEV} + container_name: ${APPNAME_DEV} + ports: + # フロントエンドlocalhost用 + - 8001:8001 + # Storybook用 + - 8106:8106 + volumes: + - ./${SHARED_WORKSPACE_HOST_DEV}:${SHARED_WORKSPACE_CONTAINER_DEV} + tty: true +``` +- 基本上記のコピペでOK +- `ports`のポート番号は必要あれば変更 + - 変更しなくても`npm run dev -- --host 0.0.0.0 --port 8001`のようにアプリ側でポート番号を変更することも可能 + + +## 起動 +※`$ ～`はホストで実行するコマンド，`# ～`はコンテナで実行するコマンド． + +1. ソースの用意 + ``` + $ cd docker_sandbox/workspace/ + $ git clone {任意のレポジトリ} + $ git checkout -b {任意のブランチ} origin/{任意のブランチ} + $ git checkout -b {任意のブランチ} + ``` +1. コンテナのビルド＆起動 + ``` + $ cd .. + $ docker-compose up -d + ``` +1. コンテナ(のターミナル)に入る + ``` + $ docker exec -it dev_nodejs bash + ``` +1. NodeJSのコマンドの動作確認 + ``` + # node --version + # npm --version + # npx --version + ``` +1. 必要あればアプリディレクトリまでcdコマンドで移動して開発 + - localhostでのViteのテストサーバの実行例下記． + ``` + # npm install + # npm run dev -- --host 0.0.0.0 --port 8001 + ``` +- コンテナ停止 + ``` + $ docker-compose stop + ``` + - コンテナ再始動 + ``` + $ docker-compose start + ``` + - ただしコンテナに必要なnetworkやvolumeが削除されたなどすると起動できないので，`docker-compose up -d`を再度やる必要あり． +- コンテナ削除 + ``` + $ docker-compose down + $ docker rmi dev_nodejs + ``` + - Dockerコンテナの削除が難しい場合はdockerコマンドで個別に削除する． + ``` + $ docker rm {コンテナ名|コンテナID} + ``` diff --git a/workspace/README.md b/workspace/README.md new file mode 100644 index 0000000..5988ccd --- /dev/null +++ b/workspace/README.md @@ -0,0 +1 @@ +Set your source code here(with git clone)!