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

はじめに

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

この記事は、Nuxt.jsアドベントカレンダー 19日の記事です。

この記事はなに？

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

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

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

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

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

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

結論

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

CodeSandboxとは？

URL： https://codesandbox.io/

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

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

料金

基本無料で使えます。

Proプランは

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

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

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

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

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

Go to CodeSandbox

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

Nuxtで検索します。

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

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

テンプレートからForkする

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

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

コードを編集する

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

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

Vercelでデプロイする準備

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

package.jsonを編集します。

script > buildを... nuxt generateに書き換えました。

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

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

Vercelにデプロイする

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

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

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

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

おまけ：GitHub連携とか

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

GitHubへリポジトリをエクスポート

コミット/PR

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

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

まとめ

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

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

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