たった3分、ブラウザだけでNuxt.jsアプリをデプロイする[CodeSandbox]


# はじめに

こんばんは、「つざき」といいます。
Twitterをやってますのでよろしければフォローお願いします。（[https://twitter.com/820zacky](https://twitter.com/820zacky)）

この記事は、[Nuxt.jsアドベントカレンダー](https://qiita.com/advent-calendar/2020/nuxtjs) 19日の記事です。

## この記事はなに？

記事を書く前は、
Nuxt.jsで何か作ってVercelなんかのホスティングサービスで公開したいというモチベーションでいたのですが、
そもそも、**何か作ってホスティングするという作業を簡単にする方法** を見つけたので、今回それを紹介します。

## アプリを作って公開する方法

Nuxt.jsのアプリを作って公開する場合、Nuxt.jsのプロジェクトを作成し、エディタでコードを編集、GitHubにPush、ホスティングサービス上でポチポチしたりしてようやくホスティングされます。
（うろ覚えです）

これらの作業は、そんなに手間ではないですが、**もっと簡単にやる方法があったんです。**

今回紹介する方法は、
**エディタ不要。コマンド不要。**
**ブラウザ操作だけ。数ステップでデプロイできます。**

たまたま見つけたので、みんな知ってるかもしれないけど個人的にはスゲーってなったので紹介します。

# 結論

- CodeSandbox すげえ
- Nuxt.jsのプロジェクトを簡単に作れる
- ブラウザ上でコード編集、GitHubにコミット/PR作成できる
- そのままVercel/Netlifyにデプロイできる
- しかも無料

# CodeSandboxとは？

URL： https://codesandbox.io/

![スクリーンショット 2020-12-19 22.21.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/c32400b6-b87c-93db-f579-d1d7bdd00a55.png)


```
CodeSandboxとはオンラインで動くコードエディターで、
ReactやVue、Angularなどのフレームワークですぐにアプリケーションを作成できるのが特徴です。

http://studio-andy.hatenablog.com/entry/codesandbox-vue より引用
```

## 料金

基本無料で使えます。

![スクリーンショット 2020-12-19 23.17.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/b250479c-2807-4416-f088-9c4f10ffca32.png)

Proプランは

- 無制限のプライベートサンドボックス
- GitHubのプライベートリポジトリ

に対応している模様。
趣味や勉強のために使う分には、無料のコミュニティプランで十分だと思います。

# CodeSandboxで3分でVercelにデプロイする方法

3分は嘘ですが、それくらい早いというのは本当です。

## CodeSandboxにサインインしてサンドボックスを作成する

### Go to CodeSandbox
https://codesandbox.io/

### Nuxt.jsのテンプレートからサンドボックスを作成する

![スクリーンショット 2020-12-19 22.21.16のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/dbaf47fc-1cd5-332e-0f53-bbed910d166e.png)

Nuxtで検索します。

![スクリーンショット 2020-12-19 22.21.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/14452023-feef-0c78-cbc6-47c9585bb41b.png)

`nuxt/codesandbox-nuxt`をクリックします。


![スクリーンショット 2020-12-19 22.21.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/7d39576e-18bc-9b43-479c-ea2e7021ee03.png)

nuxt.jsのサンプルプロジェクトが表示されます。

### テンプレートからForkする

このままでは、ファイルを編集することはできません。
Forkをクリックして、コピーを作成し、編集できるようにします。

![スクリーンショット 2020-12-19 22.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/7265f55f-b261-20af-227c-cc1006f64292.png)


Forkにはサインインが必要なのでサインインします。


## コードを編集する

そのままだと自分のコードがデプロイできたのかわかりづらいため、コードを変えてみます。
見出しをパーティフェイスの絵文字に書き換えました🥳

保存すると、右側のプレビューも更新されます。

![スクリーンショット 2020-12-19 22.34.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/d45ddb90-904d-90a6-a7da-1c905b99049e.png)


## Vercelでデプロイする準備

多分もっといい方法があります。
ただ、今の僕にはそれがわからないので、力技を使います。

package.jsonを編集します。

![スクリーンショット 2020-12-19 22.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/d1db9131-d0db-fbe3-7b3c-a986df76b5b2.png)

![スクリーンショット 2020-12-19 22.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/f0899977-cd95-154e-f66a-2abb704bf3db.png)
`script > build`を... `nuxt generate`に書き換えました。

力技です。 
こんなやり方は絶対によくない。

Vercelではビルド時に`yarn run build`を実行するようで、
この変更をしないとSSG(Static Site Generation)してくれませんでした。
たぶんVercel側で実行するスクリプトを変更する方法はあると思うので、そのうち調べます。

## Vercelにデプロイする

![スクリーンショット 2020-12-19 22.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/383e504c-198e-3478-2d69-be95d9cb12b2.png)

Vercelへの連携の設定をします。
（すでに設定済みなのでスクリーンショットなしです）

![スクリーンショット 2020-12-19 22.35.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/261a98e4-e4db-f652-e5be-bc7ff097e5fc.png)

![スクリーンショット 2020-12-19 22.35.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/a0a5ac3e-e84c-c6f0-5154-e8cfa5310514.png)

`Deploy Sandbox` をクリックすると
Vercel上でプロジェクトが作成され、デプロイフローが動き出します。
簡単すぎてやばい。

あとは1分くらい待ってると、ホスティングされます。
ね、簡単でしょ？

今回のサンプルコードのホスティング先はこちら。

https://csb-hsxpt-1rnyzowqs.vercel.app/

![スクリーンショット 2020-12-19 22.36.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/592e505d-36d2-bce5-4956-0b8dc33300ca.png)

## おまけ：GitHub連携とか

CodeSandboxではGitHubのリポジトリを読み込んだりGitHubへリポジトリをエクスポートしたり、直接コミットしたりPRを作ったりもできます。
すげえ！

## GitHubへリポジトリをエクスポート
![スクリーンショット 2020-12-19 22.23.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/fe21f31f-0f33-c52b-f787-e77b70fc4088.png)

## コミット/PR

**PR作るときは注意が必要です。**
僕は間違えて[nuxt/codesandbox-nuxt](https://github.com/nuxt/codesandbox-nuxt)の本家にテストPRを送りつけてしまいました🙇‍♂️笑
(他にも間違えてPR送りつけてる人が多数いました)

なお、GitHubへリポジトリを**エクスポート済み**であれば、コミット、PR先は**自分のリポジトリ**になります。

![スクリーンショット 2020-12-19 23.11.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/9d68b9e7-ef6c-b0c3-2520-907dbc8a971b.png)




# まとめ

**Nuxtでちょっとしたサイト作りたい人はCodeSandboxがおすすめです。**

サンプルコード作るだけの用途にとどまらず、普通にCodeSandbox上で開発できそうです。
タブレットでもゴリゴリNuxt.jsかけるのでは?
（この辺はもっといいツールあるかもしれないけどよく知らない）


Twitterをやってますのでよろしければフォローお願いします🥰
（[https://twitter.com/820zacky](https://twitter.com/820zacky)）