THIS IS JUST A PRESONAL DEV LOG
React startをDockerで
前提
## 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で作成する
create-react-appでできるものと同じだった。
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をかく
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の正体。減量モデル
教えていた堕胎。
node:-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だけ使っていればいいやということにはならない
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が動いている
docker runで出ている表示はDocker側のサーバーの情報らしい。
確かに見ているのはReactがいうとおりlocalだが、それはDockerのlocalだった！！！
別のペインでlorem50をぶち込んで保存されたら即座にcompileされて反映されたのを確認！！！ヨシ！！
コンテナ間の通信ではEXPOSE 必要 ナシ！！！
-p 3001:3000 はMac:Docker だった！！
XXXX:YYYY と指定したならば、Mac の localhost:XXXX がコンテナのポート YYYY に繋がるということですね。
既に説明されていたっ
次は
- Next.js を起動する Dockerfile を作り、Next.js コンテナを起動できること
します