React

マルチステージビルドの利用-Docker

Dockerのマルチステージビルドを利用して、Reactアプリの開発環境と本番環境(ビルド環境)を作成する。 ※以下の記事の続きとなります。 maya313.hatenablog.com Dockerで利用するファイル Dockerfile FROM node:18.12.1-alpine as common # Develop FROM comm…

Reactの開発環境を構築する-Docker

前提条件 ・Docker Composeがインストールされている。 ・Reactプロジェクトを作成している。 1. 必要なファイルを作成する 以下の内容で「Dockerfile」と「docker-compose.yml」を作成し、Reactプロジェクトと同じフォルダ階層に配置してください。 ※React…

環境変数を使用する-React

1. 環境変数ファイルの作成と配置 「.env」ファイルを作成し、Reactプロジェクトのルートディレクトリに配置する。 ※「package.json」ファイルと同じ場所 .env REACT_APP_API_HOST=https://api.example.com 2. 環境変数の使用 const login = () => { ... con…

GitHub Pagesでサイトを公開する

Reactで作成したサイトをGitHub Pagesで公開する。 前提条件として、公開するプロジェクトはすでにGitHubのリポジトリにアップロードされていることとします。 1. gh-pagesをインストール $ npm install gh-pages --save-dev 2. package.jsonファイルに設定…

Reactのプロジェクト作成

Windows10環境 1. Node.jsのインストール 下記のURLからNode.jsのLTSをダウンロードした後、インストールを行う。 nodejs.org 2. Reactのプロジェクト作成 $ npm install create-react-app