Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Reactを初めて触ってみる。(ついでにFirebaseHostingにデプロイしてみる)

普段は業務でAngularばっかり使ってますが、社内のアプリ開発コンテストでReactを使うことになりました。
徐々に勉強していこうと思いますが、まずは環境構築について書いてみます。

Getting Started

公式で色々書いてありますが、ローカル環境の構築方法は以下に書いてありました。
https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment

プロジェクトの作成

npx create-react-app my-app
package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

プロジェクトの起動

  • npm startで起動します
npm start
  • 起動に成功すると、以下のような表示が出ます
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.2.15:3000

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

→ Productionビルドしたかったらnpm run build叩いてねって書いてありますね。

  • ブラウザでアクセスします。
    ※VM(192.168.33.10)上で動かしています

image.png

テンプレートプロジェクトの構成について

  • プロジェクトルート
[vagrant@localhost /samba/my-app (master)]$ ll
合計 628
-rw-r--r--.    1 vagrant docker   2891  2月 26 22:39 README.md
drwxr-xr-x. 1022 vagrant docker  32768  2月 26 22:42 node_modules
-rw-r--r--.    1 vagrant docker 581143  2月 26 22:40 package-lock.json
-rw-r--r--.    1 vagrant docker    742  2月 26 22:40 package.json
drwxr-xr-x.    2 vagrant docker    120  2月 26 22:39 public
drwxr-xr-x.    2 vagrant docker    148  2月 26 22:39 src
  • public ディレクトリ ・・・ 静的ファイル置き場
[vagrant@localhost /samba/my-app (master)]$ ll public
合計 36
-rw-r--r--. 1 vagrant docker 3150  2月 26 22:39 favicon.ico
-rw-r--r--. 1 vagrant docker 1721  2月 26 22:39 index.html
-rw-r--r--. 1 vagrant docker 5347  2月 26 22:39 logo192.png
-rw-r--r--. 1 vagrant docker 9664  2月 26 22:39 logo512.png
-rw-r--r--. 1 vagrant docker  492  2月 26 22:39 manifest.json
-rw-r--r--. 1 vagrant docker   67  2月 26 22:39 robots.txt
  • srcディレクトリ ・・・ コード置き場
[vagrant@localhost /samba/my-app (master)]$ ll src
合計 36
-rw-r--r--. 1 vagrant docker  564  2月 26 22:39 App.css
-rw-r--r--. 1 vagrant docker  555  2月 26 22:39 App.js
-rw-r--r--. 1 vagrant docker  280  2月 26 22:39 App.test.js
-rw-r--r--. 1 vagrant docker  366  2月 26 22:39 index.css
-rw-r--r--. 1 vagrant docker  452  2月 26 22:39 index.js
-rw-r--r--. 1 vagrant docker 2671  2月 26 22:39 logo.svg
-rw-r--r--. 1 vagrant docker 5085  2月 26 22:39 serviceWorker.js
-rw-r--r--. 1 vagrant docker  255  2月 26 22:39 setupTests.js

修正してみる

App.jsの文章をHello Reactに変えてみます

src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello React
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 ↓ 保存すると即座にリロードされます

image.png

Firebaseを使って公開してみる

基本的には以前に執筆したAngularのホスティングと同じなので、異なる点だけ書いておきます。

ReactプロジェクトをProductionビルド

  • npm startした際に表示される通り、npm run buildだけでproductionビルドとなります
npm run build

 ↓

[vagrant@localhost /samba/my-app (master *)]$ npm run build

> my-app@0.1.0 build /samba/my-app
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.38 KB  build/static/js/2.bc5b117a.chunk.js
  771 B     build/static/js/runtime-main.aaf88d20.js
  605 B     build/static/js/main.63c75bea.chunk.js
  556 B     build/static/css/main.d1b05096.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

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:

  bit.ly/CRA-deploy

buildディレクトリに出力されました。

Firebase Hostingへのデプロイ

  • 公開するディレクトリはbuildに変更します
? What do you want to use as your public directory? (public) build
  • SPAの設定はyを選びます
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
  • index.htmlは上書きしません
? File build/index.html already exists. Overwrite? (y/N) N

デプロイ

firebase deploy

アクセスしてみる

image.png

最後に

Reactについては全然わかってないですが、とりあえず環境の構築とFirebaseでの公開はできました。
SPAは簡単に公開できて良いですね。

徐々にReactについても勉強していこうと思います。

teracy55
2011年からエンジニアやってます。 最近はAngular/NestJSをメインに Webシステム作ってます。過去には、組み込みエンジニアとしてC/C++でカーナビ開発、Javaで業務システム、PHPでのWebシステム開発、Android/iOSアプリ開発(Flutter、Monaca、CocosCreator)なんかをやってきました。
https://teracy-blog.web.app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away