Help us understand the problem. What is going on with this article?

Docker TypeScript で React 環境を構築

自分用のmemoのつもりで
Dockerで環境構築
Dockerはinstall済み

■Dockerfile作成
空のPJディレクトリ内にDokerfile作成し以下を記載

FROM node:13.5.0-alpine3.11
WORKDIR /usr/src/app

FROMは新しいイメージの元となるイメージの読み込み
alpineというのでめちゃくちゃファイルサイズを小さくできるらしい

■docker-compose.yml作成
※ymlは「yaml ain't markup language」の略で構造化データの表現方法
※簡単に言えば設定ファイル

version: '3'
services:
  sample:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=production
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd tips && yarn start"
    ports:
      - "3000:3000"

■イメージをビルド

docker-compose build

■React と create-react-app をインストール + アプリ作成

docker-compose run --rm sample sh -c 'npx create-react-app sample_app --template typescript'

出来上がるディレクトリ 構成

- Dockerfile
- docker-compose.yml
- アプリ名
    |- node_module
    |- public
    |- src

■起動

docker-compose up -d

※ローカルでyarn startする時よりも時間がかかる感覚はある

Localhost:3000でApp.jsの中身が表示される

■停止

docker-compose stop
habi16
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away