Reactで必要最低限のwebAppを作ってコンテナ上で起動する

2022.06.11
IT

本当に最小レベルのReactアプリを作って、Nginxのコンテナで起動させます。

ここができていれば、自分の好きなReactのサイトを作ってコンテナ化できるかと思います。

作るもののイメージは下記です。

1. Reactの雛形を作る
2. 不要なものを削除して起動する
- 2.1. ディレクトリの整理
- 2.2. ファイルの編集
3. 最低限のWebアプリを起動する
- 3.1. Buildする
4. Dockerfileとdocker-compose.yamlを作って起動させる
- 4.1. Dockerfileの作成
5. docker-compose.yamlの作成
- 5.1. 起動する
- 5.2. 起動の確認
6. まとめ

Reactの雛形を作る

下記を実行すると、アプリが起動します。

# インストールをします。
npx create-react-app test-react
# ディレクトリを移動して。。。
cd test-react

# 起動します
yarn start

# インストールをします。

npx create-react-app test-react

# ディレクトリを移動して。。。

cd test-react

# 起動します

yarn start

不要なものを削除して起動する

ここから、不要なものをどんどん削って、最低限のアプリケーションとしていきます。

ディレクトリの整理

一番最初に実行すると下記のようなディレクトリ構造になっていると思います。

-> deleteと書いたものは、いずれ必要になりますが、最低限のApplicationを作りにあたっては不要なので消去します。

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── package-lock.json
├── package.json
├── public
└── src
    ├── App.css -> delete
    ├── App.js
    ├── App.test.js -> delete
    ├── index.css -> delete
    ├── index.js
    ├── logo.svg -> delete
    ├── reportWebVitals.js -> delete
    └── setupTests.js -> delete

├── README.md

├── node_modules

├── package-lock.json

├── package.json

├── package-lock.json

├── package.json

├── public

└── src

├── App.css -> delete

├── App.js

├── App.test.js -> delete

├── index.css -> delete

├── index.js

├── logo.svg -> delete

├── reportWebVitals.js -> delete

└── setupTests.js -> delete

ファイルの編集

まずは、index.jsを下記のようにします。

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

次に、App.jsを下記のようにします。

function App() {
  return (
    <dir>minimum web app</dir>
  );
}

export default App;

function App() {

return (

<dir>minimum web app</dir>

);

}

export default App;

これで、だいぶシンプルになりました。

最低限のWebアプリを起動する

これで起動すればOKです。

# これで起動する
yarn start

1 2	# これで起動する yarn start

Buildする

基本的に上記で起動を確認できるのですが、Buildして他のサーバーで起動したいなどあるかもしれませんのでその方法も記載します。

Package.jsonを編集する

homepageという部分を追加します。

これがないと、Build時にファイルのパスを見に行ってしまうので、ローカル環境でしか起動できなくなってしまいます。

詳細はこちらのページを。

{
  "name": "test-app",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
.
.
.

{

"name": "test-app",

"version": "0.1.0",

"homepage": "./",

"private": true,

"dependencies": {

ビルドする

下記のコマンドでビルドします。

npm run build

1	npm run build

起動を確認する

出来上がったファイル（build/index.html)をブラウザで開いてみます。

無事に開けたらReact部分は完成です。

Dockerfileとdocker-compose.yamlを作って起動させる

コンテナ化して、起動していきます。

Dockerfileの作成

test-app配下にDockerfileを作成して、下記のように記載します。

FROM 'nginx'
RUN service nginx start

1 2	FROM 'nginx' RUN service nginx start

docker-compose.yamlの作成

test-appのと同じディレクトリにdocker-compose,yamlファイルを作成して、下記のように記載します。

version: '3'
 
services:
  nginx:
    build: ./test-app/
    image: dockerdemo
    ports:
      - 80:80
    volumes:
      - ./test-app/build:/usr/share/nginx/html