エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

トップ > プログラミングの勉強 > Reactアプリ（または React×TypeScriptアプリ）を作る方法メモ

Reactアプリ（または React×TypeScriptアプリ）を作る方法メモ

プログラミングの勉強 React

はじめに

本記事の目的

Reactアプリを作成、起動する。
今回はNodeイメージを使って立ち上げたdockerコンテナ上の中に入って、アプリを作成してみる。

前提

  • dockerコンテナを立ち上げられていること。
  • コンテナ起動に利用したイメージにNode.jsの機能が含まれていること。


コンテナ立ち上げ手順：
tomiko0404.hatenablog.com

dockerを利用しない場合

コンテナ上ではなくローカル環境で実施しても良い。
ローカル環境で実施する場合は、

  • Node.js
  • npm（Node.jsのパッケージ管理ツール）

がインストールされていること。

Node.jsインストール手順


tomiko0404.hatenablog.com

npmインストール手順
上記手順実施後以下コマンドを実施。

$ sudo npm install -g npm

create-react-appのインストール

Reactアプリの作成・起動

docker上で以下を実行する。

Reactアプリ作成（基本的なひな型を作成してくれる。）

$ npx create-react-app [アプリ名]

アプリ名には大文字が使えないため注意。

このとき、`create-react-app`がインストールされていない場合は自動でインストールされる。

React×TypeScriptアプリを作成したい場合

TypeScriptにしたい場合は以下コマンド。

$ npx create-react-app [アプリ名] --template typescript

起動する

$ cd [アプリ名]
$ npm start

You can now view [アプリ名] in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://XXX.XXX.XXXX.XXX:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

[アプリ名]のところは自分で作成したいアプリ名とする。今回はamplifyappとした。

参考にしたサイト
モジュール 1 - AWS で React アプリケーションを構築する

symbolic linkが作成できないエラー

symbolic linkが作れないエラーが出るときがある。

An unexpected error occurred: "EPROTO: protocol error, symlink '../../../mime/cli.js' -> '/home/vagrant/workspace/backend-practice/front_react_back_node/node_modules/send/node_modules/.bin/mime'".

これは、WindowsPC上にVagrantを立ち上げて、Vagrant上でnodeをインストールしようとすると起きることがあるエラーらしい。

以下サイトに従って対処。

参考資料：

Windowsホスト上のVagrantのシンボリックリンクフォルダでyarn installできない問題の解決 - Qiita

解決案としてはいくつかある。

PowerShell管理者権限の確認

そもそも、コマンドの実行をPowerShellの管理者権限で実行できているかを確認する。できていなければ、一度vagrant haltで落としてから、管理者権限のPowerShellでvagrant upからやり直す。


管理者権限での実行方法はこちら。
tomiko0404.hatenablog.com

オプションをつける

それで解決しなければ、

--no-bin-links

のオプションをつける方法。

Vagrantの設定変更

それでもダメであれば、Vargantfileに以下の文を追加した上で、

config.vm.provider :virtualbox do |vb|
    vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/.","1"]
  end

管理者権限のあるPowerShellで以下を実行する方法がありそう。

$ fsutil behavior set SymlinkEvaluation L2L:1 R2R:1 L2R:1 R2L:1
$ fsutil behavior query symlinkevaluation
Vargantとローカルの共有フォルダ利用をやめる

何をやってもダメな場合は、ローカルと共有しているフォルダ上で作業をするのを辞め、別フォルダ（ローカルと共有していないフォルダ）で作業する（作業完了後にフォルダ移動は可）。

ローカルからアプリを参照する

ポートフォワーディングを利用することで、ローカルブラウザでlocalhost:8000を指定することでdocker上のlocalhost:8000を参照できる。

ポートフォワーディングの設定箇所
  • Vagrantfileの中に
config.vm.network "forwarded_port", guest: 8000, host: 8000

こちらの記載を入れてあることで、ローカルの8000ポートと、vagrantの8000ポートを接続できている。

  • また、docker-compose.ymlの中に
    ports:
      - 8000:8000

の記載があることで、vagrantの8000ポートとdockerの8000ポートを接続できている。

ここでは、8000ポートでReactアプリを立ち上げる必要があるため、起動のコマンドを

PORT=8000 npm start

とするとよい。

とりあえずできた！
Reactひな型画面
Reactひな型画面

関連記事

つづき：次回、アプリを編集したときの記事はこちら。

tomiko0404.hatenablog.com

つづき：ソースコードをGit管理した。

tomiko0404.hatenablog.com