====== 30 React-admin ======

キレイでシンプルなデザインの[[https://marmelab.com/react-admin/Demos.html|React-admin]]を入れてみる。

Githubは[[https://github.com/marmelab/react-admin|こちら]]

===== 1 ファイル用意 =====

<code|Dockerfile>
FROM node:18.12.1-alpine
WORKDIR /usr/src/app
</code>

<code|docker-compose.yml>
version: '3'

services:
  node:
    container_name: "react"
    build: .
    volumes:
      - .:/usr/src/app
    command: sh -c 'cd [test-admin] && npm run dev'
    ports:
      - '3000:5173'
</code>

<color #ed1c24>※[test-admin]は、アプリ作成で作るアプリ名を入れる</color>

==== Let's Encryptリバースプロキシを利用する場合のdocker-compose.yml ====

[[06_virtualization:05_container:25_let_s_encrypt_proxy]]で、SSL化して利用する場合

<code|docker-compose.yml>
version: '3'

services:
  node:
    container_name: "react"
    build: .
    volumes:
      - .:/usr/src/app
    command: sh -c 'cd test-admin && npm run dev'
    #ports:
    #  - '3000:5173'
    environment:
      - VIRTUAL_HOST=react-admin.fl8.jp
      - VIRTUAL_PORT=5173
      - LETSENCRYPT_HOST=react-admin.fl8.jp
      - CHOKIDAR_USEPOLLING=true
    networks:
      - app_proxy-tier

networks:
  app_proxy-tier:
    external: true
</code>

===== 2 build =====

  docker-compose build

===== 3 react-admin アプリ作成 =====

<color #ed1c24>※[test-admin] は好きなアプリ名を入れる。</color>

  docker-compose run --rm node sh -c 'npm create react-admin [test-admin]'

<code>
# docker-compose run --rm node sh -c 'npm create react-admin test-admin'
Creating react_node_run ... done
Need to install the following packages:
  create-react-admin@4.16.1
Ok to proceed? (y) 

Select the data provider you want to use, and validate with Enter:
❯ Fakerest
  A client-side, in-memory data provider that use a JSON object as its initial data.

  JSON Server
  A data provider based on the JSON Server API (https://github.com/typicode/json-server)

  Simple REST
  A Simple REST data provider (https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest)

  None
  I\'ll configure the data provider myself.

↓

Select the auth provider you want to use, and validate with Enter:
❯ Hard coded local username/password
  Hard coded local username/password

  None
  No authProvider

↓

How do you want to install the dependencies?
❯ Using npm

  Using yarn

  Don't install dependencies, I'll do it myself.

↓

Your application test-admin was successfully generated.

To start working, run cd test-admin.
Start the app in development mode by running npm run dev.
You can sign in to the application with the following usernames and password:
- janedoe / password
- johndoe / password

</code>

===== 4 起動 =====

  docker-compose up -d

===== 5 確認 =====

ブラウザで http://[IP]:3000 をアクセス

{{:06_virtualization:05_container:pasted:20231214-113050.png}}

{{tag>Docker React}}