仮想開発環境の構築トップページ

Laravel で Web システムを開発する

仮想開発環境が構築できたので，Laravel による Web システムの開発を行ってみよう．

ここでの内容は別の Laravel入門ページ とほぼ同様ですが，ゼミサーバを使う場合と仮想開発環境を使う場合で若干やり方が異なり，Laravelのバージョンも異なるので注意してください．

プロジェクトの作成

仮想マシンにログインした後，ディレクトリを移動します．なお，GitHub からダウンロードしたスクリプトでインストールした場合は，Laravel のコンポーザが 「/home/vagrant/Documents/laravel/」にインストールされているので，この中にプロジェクトを作成します． 

C:\Users\Rinsaka\MyVagrant\ubuntu2204-vagrantfile>vagrant ssh ⏎
Last login: Tue Oct 25 12:32:14 2022 from 10.0.2.2
vagrant@ubuntu2204 ~ $ pwd ⏎
/home/vagrant
vagrant@ubuntu2204 ~ $ ls ⏎
Documents  ubuntu2204-ansible
vagrant@ubuntu2204 ~ $ cd Documents/ ⏎
vagrant@ubuntu2204 Documents $ ls ⏎
laravel
vagrant@ubuntu2204 Documents $ cd laravel/ ⏎
vagrant@ubuntu2204 laravel $ ls ⏎
composer.phar
vagrant@ubuntu2204 laravel $ pwd ⏎
/home/vagrant/Documents/laravel
vagrant@ubuntu2204 laravel $

myapp という名前（何でもよい）のプロジェクトを作成します．

vagrant@ubuntu2204 laravel $ ls ⏎
composer.phar
vagrant@ubuntu2204 laravel $ php composer.phar create-project --prefer-dist laravel/laravel myapp ⏎
Creating a "laravel/laravel" project at "./myapp"
Info from https://repo.packagist.org: #StandWithUkraine
Installing laravel/laravel (v9.3.8)
  - Downloading laravel/laravel (v9.3.8)
  - Installing laravel/laravel (v9.3.8): Extracting archive
Created project in /home/vagrant/Documents/laravel/myapp
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information

（中略）

  - Installing spatie/ignition (1.4.1): Extracting archive
  - Installing spatie/laravel-ignition (1.5.2): Extracting archive
56 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/sail .......................... DONE
  laravel/sanctum ....................... DONE
  laravel/tinker ........................ DONE
  nesbot/carbon ......................... DONE
  nunomaduro/collision .................. DONE
  nunomaduro/termwind ................... DONE
  spatie/laravel-ignition ............... DONE

81 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].

No security vulnerability advisories found
> @php artisan key:generate --ansi

   INFO  Application key set successfully.

vagrant@ubuntu2204 laravel $

データベースの作成

データベースに SQLite を利用する場合は，空のデータベースファイルを作成します．

vagrant@ubuntu2204 laravel $ cd myapp ⏎
vagrant@ubuntu2204 myapp $ ls ⏎
README.md  artisan    composer.json  config    lang          phpunit.xml  resources  storage  vendor
app        bootstrap  composer.lock  database  package.json  public       routes     tests    vite.config.js
vagrant@ubuntu2204 myapp $ touch database/database.sqlite ⏎
vagrant@ubuntu2204 myapp $

MySQL を使う場合は，データベースとユーザを作成します．具体的には，(1) 管理者 (root) でログインする，(2) myappDB という名前のデータベースを作成する，(3) ユーザ myapp_user を作成しパスワードを「hogehogehoge」にする，(4) データベース myappDB に対する権限をユーザ myapp_user 付与する，という手順を行います． 

vagrant@ubuntu2204 laravel $ mysql -u root -p ⏎ # (1) 管理者 (root) でログイン
Enter password: # パスワードを入力（表示されない）
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.31-0ubuntu0.22.04.1 (Ubuntu)

Copyright (c) 2000, 2022, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> SHOW DATABASES; ⏎ # データベースの一覧を確認
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.01 sec)

mysql> CREATE DATABASE myappDB; ⏎ # (2) データベースを作成
Query OK, 1 row affected (0.00 sec)

mysql> SHOW DATABASES; ⏎ # データベースの一覧を確認
+--------------------+
| Database           |
+--------------------+
| information_schema |
| myappDB            |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

mysql> CREATE USER 'myapp_user'@'localhost' IDENTIFIED BY 'hogehogehoge'; ⏎ # (3) ユーザを作成
Query OK, 0 rows affected (0.02 sec)

mysql> GRANT ALL PRIVILEGES ON myappDB.* TO 'myapp_user'@'localhost'; ⏎ # (4) 権限を付与
Query OK, 0 rows affected (0.00 sec)

mysql> FLUSH PRIVILEGES; ⏎ # 権限変更を有効化
Query OK, 0 rows affected (0.00 sec)

mysql> EXIT ⏎
Bye
vagrant@ubuntu2204 laravel $

プロジェクトの初期設定

ここから仮想マシン（仮想サーバ）内のファイルを編集します．これには Cyberduck で編集したいファイルをダブルクリックします．設定ができていれば，Visual Studio Code でそのファイルが開かれるので，編集して上書き保存すれば，Cyberduck が自動的に仮想サーバにアップロードします．

例えば，readme.md ファイルを編集してみよう．Cyberduck を使って仮想サーバに接続します．接続できれば，プロジェクトのフォルダ「/home/vagrant/Documents/laravel/myapp」に移動し，「readme.md」をダブルクリックします．

laravel-01

すると，Visual Studio Code が起動して，readme.md ファイルが開かれた．編集後，上書き保存すれば，仮想サーバにアップロードされます．

laravel-02

次は実際にプロジェクトの設定を記述する．同様の手順で .env ファイルを編集する．データベースに SQLite を使う場合は 9行目あたりにある DB_CONNECTION を sqlite に変更し，DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD の行を削除するか，先頭に # を付けてコメントアウトする．

.env （抜粋）
DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

データベースに MySQL を使う場合は上で設定した情報を入力する． 

.env （抜粋）
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=myappDB
DB_USERNAME=myapp_user
DB_PASSWORD=hogehogehoge

タイムゾーンと言語の設定

プロジェクトの設定ファイル config/app.php を編集し，タイムゾーンを Asia/Tokyo に，言語を ja に変更する．

config/app.php （抜粋）
    /*
    |--------------------------------------------------------------------------
    | Application Timezone
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default timezone for your application, which
    | will be used by the PHP date and date-time functions. We have gone
    | ahead and set this to a sensible default for you out of the box.
    |
    */

    'timezone' => 'Asia/Tokyo',

    /*
    |--------------------------------------------------------------------------
    | Application Locale Configuration
    |--------------------------------------------------------------------------
    |
    | The application locale determines the default locale that will be used
    | by the translation service provider. You are free to set this value
    | to any of the locales which will be supported by the application.
    |
    */

    'locale' => 'ja',

Webサーバの起動と終了

Webサーバを起動して，Webブラウザからプロジェクトのトップページにアクセスする．このとき，ポート番号は 8000 を指定する．ゼミサーバを利用する場合は他の学生と重複しない番号を使う必要があるが，仮想開発環境では特に気にする必要はない．

vagrant@ubuntu2204 myapp $ pwd ⏎
/home/vagrant/Documents/laravel/myapp
vagrant@ubuntu2204 myapp $ ls ⏎
README.md  artisan    composer.json  config    lang          phpunit.xml  resources  storage  vendor
app        bootstrap  composer.lock  database  package.json  public       routes     tests    vite.config.js
vagrant@ubuntu2204 myapp $ php artisan serve --host=192.168.56.101 --port 8000 ⏎

   INFO  Server running on [http://192.168.56.101:8000].

  Press Ctrl+C to stop the server

Webブラウザのアドレスバーにhttp://192.168.56.101:8000 を入力すれば，次のような画面が出るはず．

laravel-03

Webサーバを停止するにはCtrl + C を押す．

vagrant@ubuntu2204 myapp $ php artisan serve --host=192.168.56.101 --port 8000 ⏎

   INFO  Server running on [http://192.168.56.101:8000].

  Press Ctrl+C to stop the server

  2022-10-25 13:23:17 ........................................................................................... ~ 0s
  2022-10-25 13:23:17 /favicon.ico .............................................................................. ~ 0s
^C
vagrant@ubuntu2204 myapp $