ReactアプリをNowに爆速でデプロイする
2019/09/01
インストールなどは端折る。
バージョン
[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 [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 "eslint@^5.0.0".
warning "react-scripts > @typescript-eslint/[email protected]" has incorrect peer dependency "eslint@^5.0.0".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" 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
├─ [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
で起動確認。
[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