使用Laravel8+Vue3+Bootstrap5實作TODO List網頁應用程式的系列文章第一篇。
本篇將介紹如何在雲端開發環境Google Cloud Shell中用Docker建立Laravel8的開發環境。
在Google Cloud Shell中使用Docker建立Laravel應用程式的步驟如下,
準備好Google 帳號後,可以從下面之一的網站進入Google Cloud Sehll Editor。
複製下面github的專案。
https://github.com/scobin/docker-php
git clone https://github.com/scobin/docker-php.git todolist
這的專案中含有docker環境的基本設定,用指令啟動後就能擁有以下的環境,
啟動指令如下,
sudo docker-compose up -d --build
檢查結果。
docker-compose ps
進入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.conf
是一個設定檔,修改root部分的設定。
root /var/www/todolist/public;
修改完後,記得重新啟動docker。
# 先退出PHP環境
exit
# 重啟docker
docker-compose restart
從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應用了。
Laravel8+Vue3+Bootstrap5實作TODO List ep09:安裝bootstrap5並美化todo list畫面
Laravel8+Vue3+Bootstrap5實作TODO List ep07:安裝vue3跟基本設定
Laravel8+Vue3+Bootstrap5實作TODO List ep08:用vue重新製作todo list畫面
Laravel8+Vue3+Bootstrap5實作TODO List ep06:初步認識Web Route
Laravel8+Vue3+Bootstrap5實作TODO List ep05:製作新增、更新、刪除待辦事項的API