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

使用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。

• https://cloud.google.com/shell/
• https://ide.cloud.google.com

複製專案

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

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

Docker

這的專案中含有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應用。

composer 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應用了。