dockerとdocker-composeはインストールしてある状況から始めます．

環境の準備

dockerを使ってreactの環境を作ります．まず以下のようにファイルを作ります．

react_portfolio
├── Dockerfile
└── docker-compose.yml

Dockerfileに，コンテナの構成情報を書き込みます．

FROM node:14.9.0-alpine3.10 
WORKDIR /usr/src/app

docker-compose.ymlに，dockerビルドやコンテナ起動のオプションを書き込みます．サーバーで確か3000とかは既に使ってしまっていると思うので，適当なポートを指定します．

version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    environment:
      - NODE_ENV=production
    volumes:
    - ./:/usr/src/app
    command: sh -c "cd react_portfolio &&PORT=7984 yarn start"
    ports:
    - "7984:7984"

以下のコマンドを実行します．

docker-compose build

これにより，dockerのreact開発用コンテナがビルドされます．次に，reactの新規アプリの雛形を作ります．

docker-compose run --rm node sh -c 'npm install -g create-react-app && create-react-app react_portfolio'

こうすると以下のようになったはずです

react_portfolio
├── Dockerfile
└── docker-compose.yml
└──react_portfolio
          ├──README.md
          ├──package.json
          ├──node_modules
          ├──src
          ├──public
          └──yarn.lock

コンテナを起動してみます

docker-compose up

http://localhost:7984でreactのデフォルトページを見ることができました．

環境の移設

これをgithubで管理したものをさくらのサーバ側でcloneします． .gitignoreは以下のようにします．

# dependencies
react_portfolio/node_modules
react_portfolio/.pnp
.pnp.js

# testing
react_portfolio/coverage

# production
react_portfolio/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

サーバ側の/var/www/appでgit cloneして，

cd react_portfolio
npm install

sudo docker-compose build

起動できることが確認できます．

本当にこんな感じでいいのかな…？

Hello World

src/App.jsを書き換えます

function App() {
  const name ="Naomi";
  const element=<h1>Hello, {name}!</h1>
  return (
    element
  );
}

ついでにApp.test.jsもこれが通るように書き換えます

test('renders Naomi', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/Naomi/i);
  expect(linkElement).toBeInTheDocument();
});

docker-compose upで起動すると"Hello,Naomi!"と表示されます

Naomi's notebook

Naomi's notebook

Docker+reactでhello world

環境の準備

環境の移設

Hello World