Docker run で React.js を動かす -- alpine とは

# THIS IS JUST A PRESONAL DEV LOG
# React startをDockerで

https://mherman.org/blog/dockerizing-a-react-app/

## 前提

```
## stage 3
- Create React App の npm start で React を起動する Dockerfile を作り、React コンテナを起動できること
- Next.js を起動する Dockerfile を作り、Next.js コンテナを起動できること
## stage 4
- Docker Compose とは何か理解し説明できること
- Docker Compose を用いてデータベースを使うアプリケーションを起動できること 
(例: Laravel, Ruby on Rails, Nest.js, etc.)
```

これの `stage 3` を達成するためにやる。


## Local Project作成

```
npm init react-app docker-react --use-npm
npx: installed 98 in 5.736s
```

npx create-react-app ではなく`npm init react-app AppName`で作成する

![Screen Shot 2020-07-15 at 12.40.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243383/bec13182-984a-72fd-5249-178036b5b954.png)

create-react-appでできるものと同じだった。

https://docs.npmjs.com/cli/init

## Remote GitHub Project 連携

GitHubでdocker-reactのrepository作成。

```
git remote add origin git@github.com:kaede0902/docker-react.git
```

remote origin にkaede0902/docker-reactを設定。

```
git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .gitignore
        README.md
        package-lock.json
        package.json
        public/
        src/
```

.gitignoreを先にcommit

他をreact initとしてcommit

そしてpush

## Dockerfile

次にDockerfileをかく

```Dockerfile:Dockerfile
FROM node:13.12.12.0-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json
COPY package-lock.json
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

COPY . ./

CMD ["npm", "start"]
```

Dockerにnode13.12をpullしてきて
作業ディレクトリとしてDockerに /app を作成
Dockerの環境のPATHを 
/app/node_modules/.bin
に設定

package(-lock).json を rootの`./`にMacから複製してDockerに作成。

Dockerにpackage.jsonに沿って依存関係をinstall

package.jsonに書いてなかったreact-script@3.4.1をinstall

`COPY . ./` これはよくわからない、おまじない？？？

`.` を `./` にcopyするってなんだろう、日報の質問に書く

## docker build 

### 書いてある通りにアルパインを使ってのエラー

```
docker build -t docker-react:dev .
Step 1/9 : FROM node:13.12.12.0-alpine
manifest for node:13.12.12.0-alpine not found: manifest unknown: manifest unknown
```

node 13.12のmanifest unknownとでた。
ググるとこれにあたる。
https://hub.docker.com/r/mhart/alpine-node/
この13.12...alpine っていうのがmhartさんの作ったversionで、13は廃止されて12か14を使えってことなのかな？

nodeだけでやった時には FROM node:12 だけだしこれでやる

### Alpineの正体。減量モデル

教えていた堕胎。

https://hub.docker.com/_/node/?tab=description

> node:<version>-alpine
This image is based on the popular Alpine Linux project, available in the alpine official image. Alpine Linux is much smaller than most distribution base images (~5MB), and thus leads to much slimmer images in general.

なお

> alpineは軽くするためにglibcといったLinuxの基盤中の基盤のライブラリを差し替えてたりする

といった独自エラーの原因になることがあるので気をつけたほうがよさそう。

でも

> 本番で使ってるDockerでもかなりスリム化頑張ってやってる

とのことなのでじゃあnode:12だけ使っていればいいやということにはならない

https://speakerdeck.com/stormcat24/oqian-falsedockerimezihamadazhong

> Imageですけど、基本的には公式のイメージにalpineベースのものがある場合が多い(言語環境とかフレームワークとか)ので、セキュリティ的な意味でもそれを使うのが吉です

ただ今回はnode:12(公式イメージ？)使います！！！

--------------

### docker run

```
docker run \
    -it \
    --rm \
    -v ${PWD}:/app \
    -v /app/node_modules \
    -p 3001:3000 \
    -e CHOKIDAR_USEPOLLING=true \
    docker-react:dev
```

を実行
optionは-pしか理解してないです！
-rmは実行後のimage 削除？

```
Compiled successfully!

You can now view docker-react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.17.0.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
```

と出るが、実際 localhost3000 にアクセスしても

```
This site can’t be reachedlocalhost refused to connect.
Try:

Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED
```

localhost 3001 にアクセスすればReactが動いている

![Screen Shot 2020-07-16 at 14.43.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243383/75783d04-0b1c-44b7-118b-2ddb7f2eb8f1.png)

docker runで出ている表示はDocker側のサーバーの情報らしい。

確かに見ているのはReactがいうとおりlocalだが、それはDockerのlocalだった！！！

![Screen Shot 2020-07-16 at 14.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243383/26b6783f-3750-e878-10ff-012b4ff85fa5.png)

別のペインでlorem50をぶち込んで保存されたら即座にcompileされて反映されたのを確認！！！ヨシ！！
コンテナ間の通信では`EXPOSE` 必要 ナシ！！！

`-p 3001:3000` は`Mac:Docker` だった！！

> XXXX:YYYY と指定したならば、Mac の localhost:XXXX がコンテナのポート YYYY に繋がるということですね。

既に説明されていたっ

次は

- Next.js を起動する Dockerfile を作り、Next.js コンテナを起動できること

します