Laravel8+Vue3+Bootstrap5實作TODO List ep01: 開發環境與建立Laravel應用程式

Table of Contents

Table of Contents

使用Laravel8+Vue3+Bootstrap5實作TODO List網頁應用程式的系列文章第一篇。
本篇將介紹如何在雲端開發環境Google Cloud Shell中用Docker建立Laravel8的開發環境。

教學影片

實作內容與流程

在Google Cloud Shell中使用Docker建立Laravel應用程式的步驟如下,

  • 開啟Goolge Cloud Shell
  • 複製Github上準備的基本Docker環境的專案
  • 啟動Docker並進入PHP環境中建立Laravel應用程式
  • 修改Nginx設定檔(nginx.conf)
  • 解決"Permission Denied"問題

Goolge Cloud Shell

準備好Google 帳號後,可以從下面之一的網站進入Google Cloud Sehll Editor。

複製專案

複製下面github的專案。
https://github.com/scobin/docker-php

git clone https://github.com/scobin/docker-php.git todolist

Docekr

這的專案中含有docker環境的基本設定,用指令啟動後就能擁有以下的環境,

  • db: MySQL8
  • Nginx
  • PHP: PHP8, composer
  • PHPMyAdmin

啟動

啟動指令如下,

sudo docker-compose up -d --build

檢查結果。

docker-compose ps

進入PHP環境中建立Laravel應用

進入PHP環境的指令。

docker-compose exec php bash

注意,這時候會是root身份,為了讓Google Cloud Shell Editor能夠順利編輯檔案內容,要切換到你的帳號使用者。
(帳號使用者因人而異,請依照情況做修正,在本次實作中,我的帳號使用者是hobrunt_dev。)

# 新增使用者
adduser hobrunt_dev
# 切換使用者
su hobrunt_dev

切換到適當的使用者後,可在var/www路徑下建立Laravke應用。

compose create-project laravel/laravel todolist

修改Nginx設定

在專案中的nginx資料夾中的nginx.conf是一個設定檔,修改root部分的設定。

root /var/www/todolist/public;

修改完後,記得重新啟動docker。

# 先退出PHP環境
exit
# 重啟docker
docker-compose restart

解決Permission denied問題

從Cloud Shell Editor的右上角的選項中可以開啟8010的通訊埠。
(默認是8080,可以用變更選項來更改為8010)
這時如果出現"Permission denied"的訊息,就必須要來修改兩個資料夾的權限擁有者

var/www路徑下更改權限跟擁有者的指令。

chown -R www-data:www-data todolist/storage/
chown -R www-data:www-data todolist/bootstrap/cache
chmod 775 todolist/storage/
chmod 775 todolist/storage/

結果

重新整理8010網頁,如果出現Laravel的預設畫面的話,表示設定成功,之後就可以開始來開發Laravel應用了。