Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #1 環境構築

12784 ワード
Vue.js JavaScript nuxt.js cloud9 JavaScript テキストリンク

はじめに

この記事は、全18回で連載したRails 6で認証認可入り掲示板APIを構築するのフロントエンド側を構築する記事連載となります。

前提として、Rails編で構築したバックエンドAPIが必要になるのでご注意ください。
（そのため、実質#19です）

目次

全６回、毎日更新です。

環境構築

Rails編と同じ環境に構築します。
単純に環境もう1つ作るのが面倒なだけです

yarnの導入

まずはyarnを入れます。

$ curl -o- -L https://yarnpkg.com/install.sh | bash

一度ターミナルウィンドウを閉じて再度開けば、yarnコマンドが使えるようになっているはずです。

$ yarn -v
1.22.5

create nuxt-appを実行

$ cd ~/environment/
$ yarn create nuxt-app bbs_nuxt_app

UI FrameworkでVuetify.jsを選び、modulesでAxios, LintでEsLintを選択(Spaceで選択します)。それ以外はデフォルトのままいきます。

$ cd bbs_nuxt_app/
$ yarn dev
ℹ NuxtJS collects completely anonymous data about usage.                                 04:44:17
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? (Y/n)

匿名データ送信をするか聞かれるので、ご自身で選択してください。

実行するとサーバが立ち上がりますが、8080ポートが恐らくrailsで埋まっているので適当なポートが振られます。
ですがcloud9で適当なポートは弾かれるので、ブラウザでポート指定して開いても見れないはずです。

Cloud9の公式ドキュメントによれば使えるポートは8080, 8081, 8082のようなので、8081を指定します。

nuxt.config.js
 export default {
...
   build: {
-  }
+  },
+  server: {
+    port: 8081,
+  }
 }

$ yarn dev

これで、8081ポートで立ち上がるはず！
Previewを押してPop Out Into New Windowアイコンを押すと別タブで開くので、URLの末尾にポート番号指定でNuxtのWelcomeページが出ます。
...cloud9.ap-northeast-1.amazonaws.com:8081←URL末尾こんな感じ

eslintを動かす

せっかくeslintを入れたので動かしてみます。

$ yarn run lint
/home/ec2-user/environment/bbs_nuxt_app/nuxt.config.js
  69:15  error  Unexpected trailing comma  comma-dangle

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.

どうやら今さっき追加したnuxt.config.jsのところで、最後の要素にカンマがあることで怒られています。
--fixオプションを付けると自動修正してくれます。

nuxt.config.js
 export default {
...
   build: {
   },
   server: {
-    port: 8081,
+    port: 8081
   }
 }

githubにpushする

フロントエンドとバックエンドは密結合となってしまうのを避けるため、同一リポジトリではなく分離した方が良いです。
というわけでフロントエンド用の新しいリポジトリを作ります。

あとはgit pushすればOK。
公開鍵の設定やらなんやらは、Rails#2で書いた方法で対応してください。

$ git add -A
$ git ci -m 'init'
$ git remote add origin https://github.com/{YOUR_ACCOUNT}/{YOUR_REPOSITORY}.git
$ git branch -M master
$ git push -u origin master

続き

→Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #2 NuxtとRailsとの疎通テスト
【連載目次へ】