SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

基礎からはじめるReact入門

Firebase Hostingでアプリを本番環境にデプロイする

基礎からはじめるReact入門 第13回

  • X ポスト
  • このエントリーをはてなブックマークに追加

リリース用の静的コンテンツを生成しよう

 サーバーに触る前に、リリース用のコンテンツを生成する方法について解説します。まずは、今回デプロイするプロジェクトを作成します。

[リスト1]プロジェクトを作成する
$ create-react-app deploy-sample
$ cd deploy-sample

 デプロイの手順を学ぶ上ではアプリケーションの内容は重要ではないので、ソースコードは特に変更せず、初期状態のままにしておきます。

 さて、前述の通り、create-react-appで作成したプロジェクトのnpm scriptsには、リリースのために build というコマンドが用意されています(リスト2)。

[リスト2]package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

 それでは、npm run build を実行してみましょう。リスト3のようになります。

[リスト3]ビルドを実行したところ
$ npm run build
> deploy-sample@0.1.0 build /path/to/deploy-sample
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.94 KB  build/static/js/main.a285be49.js
  299 B     build/static/css/main.c17080f1.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/2vY88Kr

 ビルドが終わると、プロジェクトフォルダの中に build という名前のフォルダが増えています(図4)。

図4:ビルドするとbuildフォルダが生成される
図4:ビルドするとbuildフォルダが生成される

 中を見ると、 public フォルダと src フォルダを組み合わせて再配置したような構成になっていることが分かります(図5)。

図5:buildフォルダの中身
図5:buildフォルダの中身

 ただ再配置しただけではなく、ファイル名にハッシュを埋め込むことによりキャッシュが適切に働くようにしてあるなど、最適化のためのノウハウが適用されています。このフォルダをWebサーバーに配置することで、Webアプリケーションとしてアクセスできるようになります。

Firebase Hostingにプロジェクトを作成する

 Firebase Hostingは、アプリケーション開発支援ツール「Firebase」が持つ機能の1つで、その名の通り、Webアプリケーションをホスティング(コンテンツを保管・配信すること)する機能を持っています。

 FirebaseはGoogleアカウントを持っていれば利用できます。まずは公式サイトを開き、ページの右上から「コンソールへ移動」をクリックします(図6)。

図6:コンソールへ移動
図6:コンソールへ移動

 この際に、Googleアカウントを求められるので、ログインしてください。Googleアカウントをお持ちでない場合は、「アカウントを作成」のボタンから手順に従ってアカウントを作成してください。

 コンソールにログインすると、「プロジェクトを追加」のボタンがあるので、これをクリックします(図7)。

図7:プロジェクトの作成を始める
図7:プロジェクトの作成を始める

 すると、Firebase上に作成するプロジェクトの名前や地域の設定を求められるので、図8の通り設定します。

図8:プロジェクトの設定内容
図8:プロジェクトの設定内容

 実際には次の表のように設定しました。

表:プロジェクトの設定内容
項目
プロジェクト名 my-first-react-app
プロジェクトID <自動生成に任せる>
アナリティクスの地域 日本
Cloud Firestoreのロケーション <変更しない>
Googleアナリティクスのデータ共有 チェックを付ける
データ保護条項に同意 チェックを付ける

 入力が済んだら、「プロジェクトを作成」のボタンをクリックします。少し待つと「新しいプロジェクトの準備ができました」と表示が出る(図9)ので、「次へ」をクリックします。

図9:プロジェクトの作成が完了した
図9:プロジェクトの作成が完了した

 すると、プロジェクト管理画面が開きます。左のメニューから「Hosting」の項目を見つけて、クリックします(図10)。

図10:プロジェクト管理画面でHostingを開く
図10:プロジェクト管理画面でHostingを開く

 次の画面で出てくる「使ってみる」のボタンをクリックすると、コマンドラインによる続きの手順が紹介されます。

図11:コマンドライン操作の手順が出てくる
図11:コマンドライン操作の手順が出てくる

 ひとまずこれで、ブラウザ側で行う作業は一段落です。

次のページ
プロジェクトをFirebase Hosting向けにセットアップする

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11103 2018/10/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング