docker+react+vscode+DevContainerで環境構築、簡易メモ

# 環境
Windows 10 Home
（Microsoft Windows [Version 10.0.19042.867]）

# 手順メモ
## dockerのインストール（windows10 home）
Windows Home に Docker Desktop をインストール — Docker-docs-ja 19.03 ドキュメント
https://docs.docker.jp/docker-for-windows/install-windows-home.html

## VSCodeのインストール
- VSCodeインストール
- 拡張機能「Dev Container」を追加

## Dockerfileとdocker-composeの設定
OSはalpine。
ソースコードはgithubで管理するのでgitのインストールをしておく。

```dockerfile:Dockerfile
FROM node:14.16.0-alpine3.10

WORKDIR /usr/src/app

RUN apk update && \
    apk add git

```

## dev containerの設定と起動

```json-doc:devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.163.1/containers/javascript-node
{
	"name": "Node.js",
	"build": {
		"dockerfile": "Dockerfile",
	},
	// Set *default* container specific settings.json values on container create.
	"settings": {
		"terminal.integrated.shell.linux": "/bin/ash" // alpineの場合は"/bin/bash"ではないため注意!
	},
	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"xyz.local-history",
		"oderwat.indent-rainbow",
		"dbaeumer.vscode-eslint",
		"MS-CEINTL.vscode-language-pack-ja"
	],
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [3000],
	// Use 'postCreateCommand' to run commands after the container is created.
	"postCreateCommand": "npm install",
	// Use 'portsAttributes' to set default properties for specific forwarded ports.
	"portsAttributes": {
		"3000": {
			"label": "Hello Remote World",
			"onAutoForward": "notify"
		}
	},
	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "node"
}
```

## windowsとlinuxの改行コード問題解消

```igorpro:.gitattributes
* text=auto eol=lf
*.{cmd,[cC][mM][dD]} text eol=crlf
*.{bat,[bB][aA][tT]} text eol=crlf

```


## react環境のinitalize

```shell:shell
npm install -g create-react-app && create-react-app react-sample
```

## eslint, prettierの導入
### shell
```shell:shell
npm -i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier 
```

### .eslintrc.jsの書き換え
```js:.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // +追加
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [ // +追加
      'error',
      {
        singleQuote: true,
      },
    ],
  },
};

```

## typescript
この記事が参考になる。

VSCode + ESLint + Prettier + React + TypeScript （自分用メモ Fall, 2020） - Qiita
https://qiita.com/sprout2000/items/ee4fc97f83f45ba1d227

## hot reload
WSL2だと設定を加えないとホットリロードができない。

```:.env
CHOKIDAR_USEPOLLING=true
```

## github
### 組織を作る
必要に応じて組織を作る。

### リポジトリを作る
リポジトリを作る。

### dockerマシン上でgitを登録
リポジトリを作ると既存プロジェクトの反映方法が出てくる。
それを実行する。
### ブランチをmaster -> mainに名前変更
githubに合わせるため、名前を変更する。

## 最終成果物
docker内でreact開発の準備ができた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384142/26bb9256-c7c6-7f33-dc74-40d343b96062.png)




# チームメンバーに配布するとき
## gitのインストール
## git clone
## dockerのインストール（windows10 home）
上記記述済み。そちらを参考に構築する。、

## VSCodeのインストール
    - 拡張機能「Dev Container」を追加

## VSCodeからdockerを起動する。


# 本番環境用
検討中。
とりあえずは、以下で実行できそう。

```dockerfile:Dockerfile
FROM node:14.16.0-alpine3.10

WORKDIR /usr/src/app

RUN apk update

COPY ./ ./

RUN npm install

CMD ["npm", "start"]

```