概要
ハッカソンではとりあえず見せることが重要です。Done is Better than Perfectです。
以前ハッカソンに参加した時に、この手順はまとめといたほうがいいなと思ったので、手順を紹介します。
必要なものは下記の2つ。
- GitHub アカウント
- Netlify アカウント
留意点
- 公開まで無料で行くことを目標としています。使用するサービスのうち有料のオプションについては触れません
- この環境はあくまでフロントのみの環境です。DBが必要、サーバーサイドで動かすものが必要な場合、firebaseやHerokuなどの使用を検討してください
1. リポジトリ作成
GitHubリポジトリを用意します。無料アカウントであれば公開されたリポジトリしか作れないので、その点は注意してください。
リポジトリを作ったら、共同作業する人をCollaboratorsに追加し、次のステップへ進みます
2. Netlify プロジェクト作成
Netlifyとは、無料で静的なサイトをホスティングするサービスです。
GitHubと連携し、特定のブランチにマージされたらその中身をデプロイする、ということが可能です。今回はこの機能を使っていきます。
プロジェクト作成
プロジェクトを作成します。
New site form Gitをクリック
Continuous DeploymentでGitHubを選択し、Only select repositoriesから1.で作ったリポジトリを登録、Installボタンをクリック
Deploy Settingを設定します。ここでは
- どのコマンドを叩くか
- どのディレクトリを公開するのか
- どのブランチを使うのか
などを設定できます。
そのプロジェクトやフレームワークに合わせたコマンド、ディレクトリを設定してください。
これだけでホスティング完了です。お疲れ様でした。
備考、Netlifyの設定について
Netlifyは通常、例えば/.dist/フォルダなどのルート直下にあるディレクトリの公開を行います。
実体験ですが、僕は構成をミスって
/ios/xcodeのプロジェクト
/nuxt/nuxt.jsで作ったプロジェクト
という意味不明なリポジトリ構成にしてしまったことがあります。なぜリポジトリわけなかったのかいまだに謎です。
しかもそれをすでにチームメンバーに伝えてしまったため、今更ディレクトリ根っこから変えます..と言えませんでした。
Netlifyではnetlify.tomlという設定ファイルをリポジトリルートに起き、細かい設定を記述することができます。
以下は実際に使った設定です
[Settings]
ID = "NetlifyプロジェクトのID"
[build]
base = "nuxt/"
publish = "nuxt/dist/"
command = "npm run generate"
base: Netlifyが動作する根っこ
publish: 実際に公開するディレクトリ
command: 叩いてほしいコマンド
もっと細かい設定ができるみたいですが、最低限これだけ使えてれば公開は可能です。
https://www.netlify.com/docs/netlify-toml-reference/