ReactアプリをNowに爆速でデプロイする

Sun, 01 Sep 2019 00:00:00 +0000

インストールなどは端折る。

バージョン 🔗

[vagrant@localhost ~]$ npx -v
6.4.1
[vagrant@localhost ~]$ npx create-react-app -V
npx: 91個のパッケージを11.38秒でインストールしました。
3.1.1
[vagrant@localhost ~]$ yarn -v
1.16.0
[vagrant@localhost ~]$ now -v
16.1.2

手順 🔗

Reactアプリ作成 🔗

npx create-react-app アプリ名でアプリ作成。最初のcommitまでやってくれる。

[vagrant@localhost ~]$ npx create-react-app sample-react-app
npx: 91個のパッケージを8.587秒でインストールしました。

Creating a new React app in /home/vagrant/sample-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.0.7: The platform "linux" is incompatible with this module.
info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "react-scripts > @typescript-eslint/parser@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev ||
>= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
├─ react-dom@16.9.0
├─ react-scripts@3.1.1
└─ react@16.9.0
info All dependencies
├─ eslint-config-react-app@5.0.1
├─ react-dev-utils@9.0.3
├─ react-dom@16.9.0
├─ react-error-overlay@6.0.1
├─ react-scripts@3.1.1
├─ react@16.9.0
└─ scheduler@0.15.0
Done in 15.22s.

Initialized a git repository.

Success! Created sample-react-app at /home/vagrant/sample-react-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd sample-react-app
  yarn start

Happy hacking!

ディレクトリ移動して、yarn startで起動確認。

[vagrant@localhost ~]$ cd sample-react-app/
[vagrant@localhost sample-react-app (master)]$ yarn start
Compiled successfully!

You can now view sample-react-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 yarn build.

Nowにデプロイ 🔗

nowでデプロイできる。未ログイン状態の場合は別途ログイン作業がある。

[vagrant@localhost sample-react-app (master)]$ now
> NOTE: Deploying to Now 2.0, because this project does not yet exist. More: https://zeit.co/docs/version-detection
> Deploying ~/tmp/sample-react-app under yoshikitkg
> Using project sample-react-app
> Synced 1 file (622B) [714ms]
> https://sample-react-app-2xg2nbp1z.now.sh [v2] [1s]
> Ready! Deployed to https://sample-react-app.yoshikitkg.now.sh [52s]

https://sample-react-app-2xg2nbp1z.now.sh

まとめ 🔗

たった3コマンドで出来る。すげー。

$ npx create-react-app アプリ名
$ cd アプリ名
$ now

Now on 高木のブログ

ReactアプリをNowに爆速でデプロイする

バージョン 🔗

手順 🔗

Reactアプリ作成 🔗

Nowにデプロイ 🔗

まとめ 🔗