ブログ構築 3. Nuxt.jsアプリを公開する #01
2019年10月12日に更新

Nuxt.jsをデプロイする前の事前準備を行う

前回までに

前回のチャプターでは、Nuxtプロジェクトを作成し、トップページに"Hello Nuxt"を表示していきました。

Hello Nuxtを表示する

今回達成すること

NetlifyにNuxtプロジェクトをデプロイするための事前準備を行っていきます。

具体的には以下の3つです。

  1. Nuxtプロジェクトをgitの管理下におく
  2. BitbucketにNuxtプロジェクトをアップする
  3. 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に公開鍵を追加し、Railsプロジェクトをpushする

BitbucketにPushする

NuxtプロジェクトをBitbucketにPush(アップ)します。

とは言っても簡単で、リポジトリの下部にある2つのコマンドを実行するだけです。

2019-08-03 14-57-21

ユーザー名とリポジトリ名を自分のものに置き換えてコマンドを実行しましょう。

$ git remote add origin git@bitbucket.org:ユーザー名/リポジトリ名.git
$ git push -u origin master

コマンドの実行が完了したら、Bitbucketをリロードしてください。

Nuxtプロジェクトがアップされているはずです。

Netlifyに会員登録する

最後に下記のページからBitbucketで会員登録をします。
メールアドレス登録も構いませんが、BitBucketの方が接続が楽に行えます。

Sign up - Netlify

次回は?

これでNuxtプロジェクトをNetlifyにアップする準備は整いました。

次回はNetlifyのセットアップを行っていきます。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告