前回までに
前回のチャプターでは、Nuxtプロジェクトを作成し、トップページに"Hello Nuxt"を表示していきました。
今回達成すること
NetlifyにNuxtプロジェクトをデプロイするための事前準備を行っていきます。
具体的には以下の3つです。
- Nuxtプロジェクトをgitの管理下におく
- BitbucketにNuxtプロジェクトをアップする
- NetlifyにBitbucketで会員登録する
それでは、ターミナルからプロジェクトのルートディレクトリ移動しましょう。
(ディレクトリパスはご自身のパスに置き換えてください)
$ cd Desktop/nuxt_app/プロジェクト名
NuxtプロジェクトをGitの管理下へ置く
macでは標準でGitが導入されていますが、念のためインストールを確認してきましょう。
$ git --version
# バージョンが表示されていればインストールされています。
git version 2.20.1 (Apple Git-117)
Gitの初期化
まず、最初のコミットなので初期化を行います。
このコマンドはプロジェクト毎に最初の一回だけ行います。
$ git init
# 初期化しました。と表示されます。
Reinitialized existing Git repository in /Users/ユーザー名/Desktop/nuxt_app/Nuxtプロジェクト名/.git/
Gitの待機用リポジトリに追加する
リポジトリにNuxtプロジェクトに追加しましょう。
リポジトリとは、プロジェクトを置く箱のことです。
このコマンドは待機用のリポジトリに追加するコマンドです。
$ git add -A
Gitにコミットする
コミットとは、本格的にリポジトリに追加するコマンドです。
-mオプションで自由なメッセージを追加することができます。
今回は"create_nuxt_project"としました。
$ git commit -m "create_nuxt_project"
このメッセージはgit logコマンドで確認できます。
後から見返して、何をコミットしたか理解しやすいメッセージにしましょう。
以上でNuxtをGitの管理下へ置くことができました。
BitbucketにNuxtプロジェクトをPushする
Bitbucketへ新しいリポジトリを作成します。
まだBitbucketのセットアップが済んでいない方は、こちらの記事を参考にリポジトリの作成まで行ってください。
BitbucketにPushする
NuxtプロジェクトをBitbucketにPush(アップ)します。
とは言っても簡単で、リポジトリの下部にある2つのコマンドを実行するだけです。
ユーザー名とリポジトリ名を自分のものに置き換えてコマンドを実行しましょう。
$ git remote add origin git@bitbucket.org:ユーザー名/リポジトリ名.git
$ git push -u origin master
コマンドの実行が完了したら、Bitbucketをリロードしてください。
Nuxtプロジェクトがアップされているはずです。
Netlifyに会員登録する
最後に下記のページからBitbucketで会員登録をします。
メールアドレス登録も構いませんが、BitBucketの方が接続が楽に行えます。
次回は?
これでNuxtプロジェクトをNetlifyにアップする準備は整いました。
次回はNetlifyのセットアップを行っていきます。