高木のブログ

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

2019/09/01

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

バージョン

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

手順

Reactアプリ作成

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

[[email protected] ~]$ 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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/[email protected]" has incorrect peer dependency "[email protected]^5.0.0".
warning "react-scripts > @typescript-eslint/[email protected]" has incorrect peer dependency "[email protected]^5.0.0".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "[email protected]>=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
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
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で起動確認。

[[email protected] ~]$ cd sample-react-app/
[[email protected] 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でデプロイできる。未ログイン状態の場合は別途ログイン作業がある。

[[email protected] 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

ytkg

Written by ytkg, Twitter, GitHub