①Vue.js & Laravel8 & Docker（環境構築）

2023-04-132024-04-02

はじめに

こちらは数本の記事で構成されています

目標

githubからソースをダウンロードしてブラウザで開く

前提

前提①パソコンにnodeがインストールされている

こちらのコマンドで確認しましょう

$ node -v
  v16.13.2

もしインストールされていない場合はこちらからインストール

前提②パソコンにcomposerがインストールされている

こちらのコマンドで確認しましょう

$ composer --version
  Composer version 2.0.12

もしインストールされていない場合は（MAC）

$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer

これでインストール完了です。

前提③パソコンにDockerがインストールされている

こちらのコマンドで確認しましょう

$ docker -v
  Docker version 20.10.6

もしインストールされていない場合はこちらからインストール

実装

フロントエンド（Vue.js）の環境構築

$ cd [フォルダを作りたい階層]
        （フォルダを作りたい階層に移動）

$ git clone https://github.com/hilcrhymer78787/laravel_api_tutorial.git
        （テンプレートフォルダのダウンロード）

$ cd laravel_api_tutorial
        （ダウンロードしたフォルダの中に移動）

$ cd vue
        （package.jsonのある階層に移動）

$ npm install
        （ライブラリのインストール）

$ npm run serve
        （サーバーを立ち上げる）

http://localhost:3000 にアクセス

こちらの画面が表示されれば成功です

インフラ（Docker）の環境構築

ターミナルをもう一つ開きインフラの環境構築をします。

$ cd laravel_api_tutorial
        （ダウンロードしたフォルダの中に移動）

$ docker-compose up -d --build
        （コンテナをビルド）

$ docker-compose exec app bash
        （コンテナの中に入る）

バックエンド（Laravel）の環境構築

コマンドは基本コンテナの中で叩くことに注意してください。

$ cp .env.example .env
        （envファイルを複製）

$ composer install
        （ライブラリをインストール）

$ php artisan key:generate
        （キーの作成）

$ php artisan migrate:refresh --seed
        （データベースに接続）

http://localhost:8001 にアクセス