VueとLaravelで始めるGraphQL

環境構築

Docker周りの設定

1. プロジェクトフォルダ内にdocker-compose.yamlを作成し、下記コードを記載する。

docker-compose.yaml

# docker-composeのバージョンを指定
version: '3'
# docker-composeが起動させる各コンテナを記載
services:
  app:
    container_name: app
    # 実行するDockerfileのパス
    build: ./docker/php
    volumes:
      - .:/var/www
  nginx:
    image: nginx
    container_name: nginx
    # このポートをlocalhostの末尾につけたらアプリケーションが表示される
    ports:
      - 8000:80
    volumes:
      - .:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /var/www
    depends_on:
      - app
  db:
    image: mysql:5.7
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: database
      MYSQL_USER: db-user
      MYSQL_PASSWORD: db-pass
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306

1. dockerフォルダを作成し、さらにphpフォルダとnginxフォルダを作成する。
2. nginxフォルダにdefault.confを作成し、下記コードを記載。

default.conf

server {
  listen 80;
	#ルートフォルダを指定
  root /var/www/backend/public;
	#ルートファイル設定
  index index.php;
  location / {
    root /var/www/backend/public;
    index index.php;
    try_files $uri $uri/ /index.php$query_string;
  }
  location ~ \.php$ {
    try_files $uri =404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass app:9000; 
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}

1. phpフォルダにphp.iniとDockerfileを作成し、それぞれ下記コードを記載。

php.ini

# php.ini
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
[opcache]
opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=4000
opcache.revalidate_freq=60
opcache.fast_shutdown=1
opcache.enable_cli=1

Dockerfile

# Dockerfile
#イメージ名
# nginxで動かすには「-fpm」が必要
FROM php:8.0-fpm
# RUNはFROMのイメージ環境によって実行させるコマンドを指定する
# データベース周りのアプリをインストール
RUN apt-get update && apt-get install -y zlib1g-dev mariadb-client vim libzip-dev && docker-php-ext-install zip pdo_mysql

# Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
# ファイル移動
RUN mv composer.phar /usr/local/bin/composer

# nodeJs install
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get install -y nodejs

#set up vue
RUN npm install -g @vue/cli

# 環境変数の設定
# composerをroot権限で実行させるための権限付与
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATY $PATH:/composer/vendor/bin

# 作業フォルダ名
WORKDIR /var/www
# Laravelのインストール
RUN composer global require "laravel/installer

1. docker-compose up -dを実行し、コンテナを作成する。

参考資料

https://www.torat.jp/laravel-docker-lemp/

Laravelの設定

1. プロジェクトフォルダでcomposer create-project laravel/laravel --prefer-dist フォルダ名を実行する。今回はDocker設定の都合上フォルダ名はbackendにする。

   1. --prefer-dist　と—-prefer-sourceの2種類があるが、distの方は配布版(zipファブル)sourceの方はgit cloneでコードを取得している。

2. .envファイルのデータベース設定を下記のように変更する。

   .env

   DB_CONNECTION=mysql #イメージの種類
   DB_HOST=db # container_name
   DB_PORT=3306 # docker-compose.yamlで設定したポート番号
   DB_DATABASE=database # docker-compose.yamlのMYSQL_DATABASE
   DB_USERNAME=db-user　# docker-compose.yamlの MYSQL_USER
   DB_PASSWORD=db-pass　# docker-compose.yamlのMYSQL_PASSWORD
   

3. database/seeders/DatabaseSeeder.phpの\App\Models\User::factory(10)->create();のコメントアウトを外し、php artisan migrate --seedを実行する。

4. composer require nuwave/lighthouseを実行し、lighthouseをインストールする。

5. php artisan vendor:publish --tag=lighthouse-schemaを実行し、デフォルトをschma.graphqlを作成する。graphqlフォルダが作成され、その中に生成される

6. composer require mll-lab/laravel-graphql-playgroundを実行し、GraphQLの動作テストをUIで行えるライブラリをインストールする。

7. config/cors.phpに下記コードを追加する

'paths' => ['api/*', 'graphql'],

1. php artisan vendor:publish --tag=lighthouse-configを実行し、lighthouseの設定ファイルを作成する。(この説明では使いません)
2. http://localhost:8000/graphql-playgroundにアクセスして、graphqlで情報が取得できるかを確認する。

参考資料

https://maasaablog.com/development/backend/php/laravel/1873/

https://kin29.info/composer-の-prefer-distってよく使うけど何してる？/

https://hara-chan.com/it/programming/prefer-dist-prefer-source-difference/

https://don-bu-rakko.com/laravel-で-graphql-を使えるようにする！-lighthouseハンズオン/#Lighthouse_の導入

Vueプロジェクトの設定

1. npm init vite@latest folder_name -- --template vue-ts を実行し、vueプロジェクトを作成する。
   1. npm のバージョンが7以上の場合は—templateの前にハイフンが二つ必要(参考資料)
2. 作成したフォルダに移動して、npm install --save graphql graphql-tag @apollo/clientを実行しモジュールをインストールする
3. npm install --save @vue/apollo-composableコマンドを実行する。
4. main.ts下記のように変更する。

main.ts

import { createApp, provide, h } from 'vue'
import './style.css'
import App from './App.vue'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'

// HTTP connection to the API
const httpLink = createHttpLink({
    // GraphQLの情報を取得できるURLを指定
		// 今回はDockerの都合上下記URLを指定
    uri: 'http://localhost:8000/graphql',
  })
  
  // Cache implementation
  const cache = new InMemoryCache()
  
  // Create the apollo client
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
  })

createApp({
    setup () {
      provide(DefaultApolloClient, apolloClient)
    },
  
    render: () => h(App),
  }).mount('#app')

1. 情報を取得したいvueファイルのscript内、もしくはcomposableフォルダに下記のようなコードを追加して、情報を取得できるか確認する。

graphql.ts

import { useQuery } from '@vue/apollo-composable'

const getVal = async () => {
  const {result} = await useQuery(gql`query{
	  users {
		  data{
		    name
		  }
	 }
  }`)
   return result
 }

参考資料

https://v4.apollo.vuejs.org/guide-composable/setup.html#_1-install-vue-apollo-composable

https://v4.apollo.vuejs.org/guide-composable/query.html#usequery

https://zenn.dev/gamin/articles/881a3e33be3135