はじめに
Laravelメインで仕事していましたが、最近はめっきりEC-Cube使いになってしまい、Laravel忘れそうな上野です。友人からZennの記事「Nuxt + Laravelでとりあえず動くものをサクッと作る」をやってみたところ、エラーで動かなかったと聞いたので自分でも試そうと思い記事を書いています。
環境
環境は参考にしているサイトのものから、現状の最新のものにアップデートしています。またDBは環境を汚したくないのでDocker(docker-compose)にてインストールする事としました。
- MacBook Pro (Intel Core 2019モデル)
- macOS Monterery 12.2.1
- VSCode
- フロントエンド
- Node.js : 16.14.0
- npm : 8.5.1
- yarn : 1.22.17 （使わないけど念のため）
- Nuxt.js : 2.15.8
- TypeScript : 4.5.5
- バックエンド
- PHP : 8.1.0
- Compsoer : 2.2.6
- Laravel : 9.0.1
- DB
- MySQL : 8.0.28-debian (from Docker Hub with docker-compose)
フォルダ構成
sample
├── docker
│ └── docker-compose.yml
├── laravel-sample
└── nuxt-sample
Nuxt（フロントエンド）の構築
1. create (npx create-nuxt-app)
まずは参考サイトと同じくnpx create-nuxt-appでプロジェクトを作成します。yarn好きな人はyarnでインストールしてください（参考）。
terminal
mkdir sample
cd sample
npx create-nuxt-app nuxt-sample
対話式の質問と答え
? Project name: nuxt-sample
? Programming language: TypeScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not usi
ng typescript)
? Continuous integration: None
? Version control system: Git
以下のようなメッセージがでれば成功
🎉 Successfully created project nuxt-sample
To get started:
cd nuxt-sample
npm run dev
To build & start for production:
cd nuxt-sample
npm run build
npm run start
To test:
cd nuxt-sample
npm run test
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
Nuxtのテスト起動をしてみます。
terminal
cd nuxt-sample
npm run dev
成功すると以下のように表示される。
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: static │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
ℹ Preparing project for development
ℹ Initial build may take a while
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
✔ Client
Compiled successfully in 3.77s
ℹ Waiting for file changes
ℹ Memory usage: 266 MB (RSS: 402 MB)
ℹ Listening on: http://localhost:3000/
No issues found.
Listening on: http://localhost:3000/ と表示されているのでブラウザでhttp://localhost:3000/にアクセスするとNuxtJSが表示されます。
Ctrl-CでNuxtを終了しておきます。
2. 開発準備
普段私はPhpStormやWebStormを使っているのですが、元記事の筆者さんはVSCode使いのようなので、今回はVSCodeを使ってみます。
VSCodeの設定
お作法が良く分かっていないので、参考サイトをそのまま写経します。
terminal
mkdir ~/.vscode
vi ~/.vscode/settings.json
~/.vscode/settings.json
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.experimental.templateInterpolationService": true,
"vetur.format.defaultFormatter.html": "prettier",
"files.autoSave": "afterDelay",
"eslint.alwaysShowStatus": true,
"editor.tabSize": 2,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": true,
"files.insertFinalNewline": true,
"files.eol": "\n"
}
ESLintの設定
Nuxtプロジェクトルートにある.eslintrc.jsを以下のように修正します。
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: [
'@nuxtjs/eslint-config-typescript',
'plugin:nuxt/recommended',
'prettier',
],
plugins: [],
// add your custom rules here
rules: {
'no-useless-constructor': 'off',
'vue/singleline-html-element-content-newline': 'off',
'no-use-before-define': 'off',
quotes: [
'error',
'single',
{
avoidEscape: true,
allowTemplateLiterals: false,
},
],
},
}
3. proxy と nuxt.config.js の設定
今回はproxyを利用してCORS対策を行っているようです。なのでNuxt.js向けパッケージの@nuxtjs/proxyをインストールして、設定をします。
terminal
npm i @nuxtjs/proxy
インストールが終わったら nuxt.config.js を以下のように変更します。
警告
元サイトにも書かれていますが、proxy URLが直書きされています。プロダクション環境では環境変数を用意しましょう。
nuxt.config.js
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'nuxt-sample',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
// https://www.npmjs.com/package/@nuxtjs/proxy
'@nuxtjs/proxy', // <= 追加
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true, // <= 修正
},
proxy: { // <= 追加
'/api': 'http://localhost:8000', // <= 追加
}, // <= 追加
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
}
4. HTTPClient
axiosを使います。
外部通信メソッド作成
BookServiceを実装します。元サイトのコードのママでは動作しなかったので、一部修正してあります。
terminal
mkdir service
touch service/book.ts
service/book.ts
import axios, { AxiosResponse } from 'axios'
export interface BookResponse {
id: number
title: string
author: string
}
export interface BookRequest {
title: string
author: string
}
export class BookService {
static async fetchBooks(): Promise<BookResponse[]> {
const { data } = await axios.get<AxiosResponse<BookResponse[]>>(
'/api/books'
)
return data.data
}
static async postBookData(bookRequest: BookRequest) {
await axios.post('/api/books', bookRequest)
}
static async fetchBook(bookId: number) {
const { data } = await axios.get<AxiosResponse<BookResponse>>(
`/api/books/${bookId}`
)
return data.data
}
static async putBook(bookId: number, data: BookRequest) {
axios.put(`/api/books/${bookId}`, data)
}
static async deleteBook(bookId: number) {
await axios.delete(`/api/books/${bookId}`)
}
}
5. vueファイルの作成
pages/index.vueを修正します。元サイトに載っていたママでは動作しなかったので、一部修正してあります。
pages/index.vue
<template>
<div>
<h2>List</h2>
<ul v-for="(book, i) in books" :key="i">
<li>{{ book.title }}</li>
<nuxt-link :to="{ name: 'book-detail-id', params: { id: book.id } }"
><button>詳細</button>
</nuxt-link>
<button @click="onClickDelete(book.id)">削除</button>
</ul>
<h3>新規追加</h3>
<input v-model="form.title" type="text" placeholder="title" /><br />
<input v-model="form.author" type="text" placeholder="author" /><br />
<button @click="onClickAdd">追加</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import {BookService, BookResponse } from '@/service/book'
interface Form {
title: string
author: string
}
type Book = BookResponse
interface DataType {
form: Form
books: Book[]
}
export default Vue.extend({
async asyncData() {
const books = await BookService.fetchBooks()
return {
books,
}
},
data(): DataType {
return {
form: { title: '', author: '' },
books: [],
}
},
methods: {
async onClickAdd() {
await BookService.postBookData({ ...this.form })
this.books = await BookService.fetchBooks()
this.form = { title: '', author: '' }
},
async onClickDelete(bookId: number) {
await BookService.deleteBook(bookId)
this.books = await BookService.fetchBooks()
},
},
})
</script>
詳細ページを作ります。このファイルも元サイトのママでは動かなかったので修正しています。
mkdir -p pages/book/detail
touch pages/book/detail/_id.vue
pages/book/detail/_id.vue
<template>
<div>
<h2>詳細</h2>
<input v-model="book.title" type="text" />
<input v-model="book.author" type="text" />
<button @click="onClickEdit">修正</button>
<nuxt-link :to="{ name: 'index' }"><p>Book List</p></nuxt-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { BookService, BookResponse } from '@/service/book'
type Book = BookResponse
interface DataType {
book: Book
}
export default Vue.extend({
async asyncData({ route }) {
const bookId = Number(route.params.id)
const book = await BookService.fetchBook(bookId)
return {
book,
}
},
data(): DataType {
return {
book: {
id: 0,
title: '',
author: '',
},
}
},
methods: {
onClickEdit() {
const bookId = Number(this.$route.params.id)
BookService.putBook(bookId, this.book)
this.$router.push({ name: 'index' })
}
}
})
</script>
Laravel（バックエンド）の構築
0. DBの設定
DockerでサクッとMySQL8環境を作ってしまいます。XAMP, MAMPを使われている方などはスキップしてください。
docker-compose.yml
version: '3'
services:
db:
image: mysql:8.0.28-debian
command: mysqld --default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: laravel
MYSQL_USER: laravel
MYSQL_PASSWORD: password
expose:
- 3306
ports:
- 3306:3306
volumes:
- ./data:/var/lib/mysql
起動
docker-compose up
1. create （composerによる）
元記事ではLaravelインストーラーを使っていますが、ここではcomposerでインストールすることにします。
cd sample
composer create-project laravel/laravel laravel-sample
2. LocalにDBを作る
DockerにMySQLを構築しているので、既にDBは作成済みです。
ROOT PASSWORD : password
DATABASE NAME : laravel
USER NAME : laravel
USER PASSWORD : password
念のため作成されたDATABASE(laravel)があるか確認してみます。
mysql -h127.0.0.1 -uroot -ppassword
mysql> SHOW DATABASES;
+--------------------+
| Database |
+--------------------+
| information_schema |
| laravel |
| mysql |
| performance_schema |
| sys |
+--------------------+
5 rows in set (0.01 sec)
3. 各種設定
.env
.envのDB_で始まる列がDatabase設定になります。見てみると以下のようになっているはずです。
.env（抜粋）
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
ここのDB_PASSWORDを修正します。
DB_PASSWORD=password
config/app.php
timezoneとlocaleの修正です。
今回は72行目と85行目を修正しました（Laravelのバージョンによって変わります）
config.app.php
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
config/database.php
charsetとcollation（元サイトではcallation表記、TYPOか？）の変更をするよう指定がありますが、今回utf8mb4でデータベースを作成しているので変更はしません。
4. modelの作成
artisanコマンドでモデルを作成します。
php artisan make:model Book --migration
以下のようにBook.phpを修正します。
app/Models/Book.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Book extends Model
{
use HasFactory;
protected $fillable = [
'title',
'author',
];
}
マイグレートファイルを修正します。私の環境ではdatabase/migrations/2022_02_19_164808_create_books_table.phpというファイルで作成されています。元サイトには$table->bigIncrements('id')を使うように記述されていますが、ちょっと古いので$table->id()を使っています。
database/migrations/2022_02_19_164808_create_books_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('books', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('author');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('books');
}
};
5. migrate
migrationをしていきます。
php artisan migrate
確認します。
mysql -h127.0.0.1 -uroot -ppassword laravel
mysql> SHOW TABLES;
+------------------------+
| Tables_in_laravel |
+------------------------+
| books |
| failed_jobs |
| migrations |
| password_resets |
| personal_access_tokens |
| users |
+------------------------+
6 rows in set (0.00 sec)
mysql> DESC books;
+------------+-----------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+-----------------+------+-----+---------+----------------+
| id | bigint unsigned | NO | PRI | NULL | auto_increment |
| title | varchar(255) | NO | | NULL | |
| author | varchar(255) | NO | | NULL | |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
+------------+-----------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)
## 6. controllerの作成
controllerを作成します。
```terminal
php artisan make:controller BookController --api
app/Http/Controllers/BookController.phpが作成されているので、以下のように修正します。
app/Http/Controllers/BookController.php
<?php
namespace App\Http\Controllers;
use App\Models\Book;
use Illuminate\Http\Request;
class BookController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$books = Book::all();
return response()->json([
'message' => 'ok',
'data' => $books,
], 200, [], JSON_UNESCAPED_UNICODE);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$book = Book::create($request->all());
return response()->json([
'message' => 'Book created successfully',
'data' => $book
], 201, [], JSON_UNESCAPED_UNICODE);
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$book = Book::find($id);
if ($book) {
return response()->json([
'message' => 'ok',
'data' => $book
], 200, [], JSON_UNESCAPED_UNICODE);
}
return response()->json([
'message' => 'Book not found',
], 404);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$update = [
'title' => $request->title,
'author' => $request->author
];
$book = Book::where('id', $id)->update($update);
if ($book) {
return response()->json([
'message' => 'Book updated successfully',
], 200);
}
return response()->json([
'message' => 'Book not found',
], 404);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$book = Book::where('id', $id)->delete();
if ($book) {
return response()->json([
'message' => 'Book deleted successfully',
], 200);
}
return response()->json([
'message' => 'Book not found',
], 404);
}
}
7. routesの設定
routes/api.phpを修正します。
routes/api.php
<?php
use App\Http\Controllers\BookController;
use Illuminate\Support\Facades\Route;
Route::apiResource('/books', BookController::class);
動作確認
Laravel起動
php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
[Sat Feb 19 17:08:02 2022] PHP 8.1.0 Development Server (http://127.0.0.1:8000) started
Laravelが8000番ポートで立ち上がりました。
Nuxt起動
先ほどと同じです。Laravelが起動した状態でNuxtを起動します。
npm run dev
> nuxt-sample@1.0.0 dev
> nuxt
ℹ [HPM] Proxy created: /api -> http://localhost:8000 17:08:29
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: static │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
ℹ Preparing project for development 17:08:31
ℹ Initial build may take a while 17:08:31
ℹ Discovered Components: .nuxt/components/readme.md 17:08:31
✔ Builder initialized 17:08:31
✔ Nuxt files generated 17:08:31
✔ Client
Compiled successfully in 3.28s
ℹ Waiting for file changes 17:08:35
ℹ Memory usage: 209 MB (RSS: 371 MB) 17:08:35
ℹ Listening on: http://localhost:3000/ 17:08:35
No issues found. 17:08:36
立ち上がりました。
ブラウザで確認
http://localhost:3000/ にアクセスします。
表示されたのでCRUD操作をします。
（元サイトの通りなので省略、、、）
DBの値を確認します。
mysql -h127.0.0.1 -uroot -ppassword laravel
mysql> SELECT * FROM books;
+----+-----------------------+-----------------------+---------------------+---------------------+
| id | title | author | created_at | updated_at |
+----+-----------------------+-----------------------+---------------------+---------------------+
| 2 | 京都大原三千院 | テストユーザー | 2022-02-19 17:13:07 | 2022-02-19 17:13:10 |
| 3 | iPhoneの使い方 | foo bar | 2022-02-19 17:14:25 | 2022-02-19 17:14:25 |
+----+-----------------------+-----------------------+---------------------+---------------------+
2 rows in set (0.00 sec)
DBに情報が格納されていることが分かります。
最後に
ネットの情報のママに打ち込んでも上手くいかないと言うことは多々あるようです。今回は修正した内容については深く追いませんが、やはり初学者の方には面倒でも公式サイトの記述を読んで頂きたいところです。