Laravel で Nuxt.js を使ってみる(Docker環境)

2020/03/15

Laravel 環境で Nuxt.js を利用してみたいと思います。
npm など基本的な環境がインストールされていることを前提とします。

基本的な情報は、以下のサイトを参考にすると良いでしょう。

https://ja.nuxtjs.org/guide/installation

nuxt インストール


$ npm install nuxt@2.11.0

Vue ファイルのサンプル確認

Nuxt.js のデフォルトは、同一ディレクトリに展開するため、Laravel プロジェクトと混在しないように、別途作業ディレクトリを作成します。

今回は「」」ディレクトリを作成します。


$ mkdir client

設定ファイル

「nuxt.config.js」ファイルを作成し、「client」を作業ディレクトリに設定します。


module.exports = {
  srcDir: 'src/',
}

プロジェクト作成

Nuxt.js プロジェクトを以下設問を答えながら作成します。


$ yarn create nuxt-app client ./client

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in client
? Project name client
? Project description My top-notch Nuxt.js project
? Author name Yohei Yoshikawa
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint, Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
...
  • Axios:サーバとAPI通信できるモジュール
  • ESLint:JavaScript 検証ツール
  • Prettier:JavaScript フォーマッター
  • Universal (SSR):サーバ側でレンダリング

ディレクトリ構成

プロジェクトが作成されると、ディレクトリも自動的に作成されます。
各ディレクトリは以下のようなファイルを配置します。

  • assets:CSS や JavaScript ファイル
  • components:vue のコンポーネント
  • layouts:vue レイアウトファイル
    default.vue がデフォルトのレイアウトとなります。
  • middleware:共通処理をする場合に利用するミドルウェアファイル
  • node_modules:モジュールのパッケージファイル
  • pages:各ページ用の vueファイル
  • plugins:プラグインファイル
  • static:イメージファイルなど
  • store:データファイルなど

Nuxt 動作確認

Nuxt サーバ起動

nuxt コマンドでサーバを起動できます。


$ nuxt

nuxt のパスは「./node_modules/.bin/nuxt」です。

vue ファイルの作成

ブラウザ確認

デフォルトで「3000」ポートで起動確認できます。

http://localhost:3000/

index.vue に記載されたテンプレート「Hello World」が表示されることを確認します。

Laravel と Nuxt.js でAPI通信

Laravel でテストAPIを作成

routes/api.php に今回のテスト用の API (/api/test)を追加します。


Route::get('test', function() {
    return 'Lalavel Api Test';
});

API 動作確認

ブラウザで「Lalavel Api Test」が表示されるか確認します。

http://localhost/larablog/api/test

Axios モジュール

Nuxt.js で通信するために Axios モジュールを利用します。

nuxt-community/axio-modules

Next.js のプロジェクト作成でインストールしていますが、個別でインストールすることもできます。


$ npm i @nuxtjs/axios
//または
$ yarn add @nuxtjs/axios

Proxy モジュールインストール

Docker 環境で Nuxt.js + axios を利用するとポートの関係で通信ができません。 よって、Proxy を利用して通信ポートを設定します。


$ npm i @nuxtjs/proxy
//または
$ yarn add @nuxtjs/proxy

nuxt.config.js 設定

nuxt.config.js に 「axios」「proxy」モジュールを設定します。


module.exports = {
  srcDir: 'src/',
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    baseURL: 'http://localhost:3000'
  },
  proxy: {
    '/api': 'http://localhost/',
  },
}

Docker 環境で動作させると「http://localhost/」のリクエストがリジェクトされるため、プロキシを設定が必要です。


 ERROR  connect ECONNREFUSED 127.0.0.1:8000    

上記では、axios のベースURLを「http://localhost:3000」(Nuxt.jsサーバのデフォルト)を設定します。

そして、proxy は /api を検出したら「http://localhost/」(ポート80)にアクセスできるようにします。

index.vue

まず、template タグのデータ部分を vue変数に修正します。

templateタグの下に、script タグで以下を追記します。


export default {
  async asyncData({app}) {
    const url = 'http://localhost/api/test' //Laravel の API URI
    const message = await app.$axios.$get(url)
    return {
        url,
        message
     };
  }
}

Nuxt サーバで動作確認


$ nuxt

Nuxt サーバを起動して、http://localhost:3000 にアクセスしてみます。

index.vue で設定した API URL 「http://localhost/api/test」でリクエスト、Laravel API の「Lalavel Api Test」がレスポンスされれば成功です。

カスタムのペジネーションを作る
2020/03/30
node-sass を使って sass をコンパイルする
2020/03/30
Log ファサードでSQLログを分離して書き出す
2020/03/29
いちから始める Docker - 複数のコンテナを使う - (2020年)
2020/03/28
いちから始める Docker - docker-compose を使う - (2020年)
2020/03/28
AWS ECR を使ってみる
2020/03/26
Laravel7 でマルチ認証
2020/03/24
Mac に AWS Client を設定する
2020/03/22
Laravel 7 リリース
2020/03/19
v-html でHTML表示する
2020/03/17
Laravel で Vue コンポーネントを使う
2020/03/15
Laravel で Nuxt.js を使ってみる(Docker環境)
2020/03/15
いちから始める Docker -コンテナをビルド- (2020年)
2020/03/12
いちから始める Docker -起動してみる- (2020年)
2020/03/11
Mac で MySQL(8系)
2020/03/03
composer で vendor がインストールできない
2020/03/02
Eloquent の日付を Carbon で扱う
2020/03/01
webpack 4 入門(npm編)
2020/02/27
[Mac]容量を減らす
2020/02/14
DIコンテナはじめ
2020/02/08
freee SDKを Laravel で使ってみる
2020/02/06
freee API を使ってみる
2020/02/06
Segueを利用しない画面遷移
2020/02/01
Xcode11.3 で XVim2 を利用する
2020/01/31
Codable で JSONを読み込み
2020/01/30
Webpack入門(yarn編)
2020/01/24
MacからLaradock PostgreSQLで接続エラー
2020/01/21
Dockerで不要なコンテナ・イメージを削除
2020/01/18
Mac で Laradock の構築
2020/01/18
yarn インストール&プロジェクト作成
2020/01/12
Laravel 6.x 構築(Homestead編)
2020/01/12
Composer インストール
2020/01/12
nvm インストール
2020/01/12
npm install が Mac でエラー
2020/01/05
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
2020/01/04
DI(依存性注入)
2019/12/30
[Ubuntu]Let's Encryptで無料の証明書を利用する
2019/12/22
[Apache]Apache2.4のアクセス制限が変更
2019/12/22
[Ubuntu]rootのログインとsudo権限追加
2019/12/22
タミヤ マイコンロボット工作セットをMacに接続してみた
2019/12/21
pgAdimn4 でブラウザで開けなくなる
2019/09/28
Java8 を HomebrewとjEnvで構築
2019/09/28
Android Studio環境構築 2019
2019/09/24
ロケールの再構築
2019/08/27
vagrant グループに Apacheを追加
2019/08/27
Linux2 Apache2 + PHP7.3 + PostgreSQL10
2019/08/25
Anadondaの削除
2019/08/25
[Mac]初期設定メモ(CentOS)
2019/08/21
[Mac]PostgreSQL起動
2019/08/20
[Debian]Node.js安定板インストール
2019/08/09