iT邦幫忙

2023 iThome 鐵人賽

0
DevOps

嘿,稍等一下!別急著開發功能,先來打造 Walking Skeleton 吧!系列 第 33

【Walking Skeleton】Day33 - 調整 Laravel Sail 容器設定

  • 分享至 

  • xImage
  •  

建立客製化設定檔

目前位置:WSL

預設的 dockerfile 是放在 vendor 裡的,但是我們不應該去改裡面的檔案,所以官網提供了一個方法,能夠使用自己的設定

https://laravel.com/docs/10.x/sail#sail-customization

首先在專案資料夾中輸入這段指令,把 sail 的 dockerfile 載入專案中

vendor/bin/sail artisan sail:publish

跑完會多出一個 docker 資料夾


設定 Git

目前位置:Windows PowerShell

再來是要讓 Git 可以在容器中使用,我們並不需要再次設定 SSH 連線,只需要打開 PowerShell 輸入幾個指令就行了

https://code.visualstudio.com/remote/advancedcontainers/sharing-git-credentials#_using-ssh-keys

一開始需要將 SSH agent 啟動起來

Set-Service ssh-agent -StartupType Automatic
Start-Service ssh-agent
Get-Service ssh-agent

之後是將設定到 Github 的私鑰,如果是用 id_ed25519 這個檔案那就要輸入 id_ed25519,可以到 ~/.ssh 中查看有哪些私鑰,如果忘記了就每個都加進去也是可以

我的私鑰檔名是 github,所以檔案路徑是 $HOME/.ssh/github

ssh-add $HOME/.ssh/{連線github的私鑰檔案}

加完之後先進到容器中檢查一下

ssh -T git@github.com

出現 Permission denied 的話,可能是因為 Windows OpenSSH 版本太低了

在 Windows PowerShell 查看 OpenSSH 版本

ssh -V

可以從這邊下載更新程式
https://github.com/PowerShell/Win32-OpenSSH/releases/

或是使用 winget 安裝

winget install Microsoft.OpenSSH.Beta

再次查看 OpenSSH 版本

ssh -V

啟動 ssh-agent

Set-Service ssh-agent -StartupType Automatic
Start-Service ssh-agent
Get-Service ssh-agent

再次到容器中輸入

ssh -T git@github.com

如果出現 successfully 就是設定成功囉

趕緊在容器中把剛初始化好的專案紀錄一下吧


設定 devcontainer.json

目前位置:WSL VSCode

設定容器中預設要裝的 VSCode 擴充功能,這些擴充功能會在首次進入容器時安裝

點開想裝的功能後,按旁邊的齒輪就能加入到 .devcontainer/devcontainer.json 中

以下是我會用到的 37 個擴充功能,我就不一一解釋啦

也放一份到 .vscode/extensions.json 的好處是也能推薦給沒有用 Docker 開發的人

.vscode/extensions.json

{
    "recommendations": [
        "mkxml.vscode-filesize",
        "patbenatar.advanced-new-file",
        "sleistner.vscode-fileutils",
        "bmewburn.vscode-intelephense-client",
        "st-pham.php-refactor-tool",
        "wongjn.php-sniffer",
        "m1guelpf.better-pest",
        "DEVSENSE.phptools-vscode",
        "DEVSENSE.intelli-php-vscode",
        "DEVSENSE.profiler-php-vscode",
        "DEVSENSE.composer-php-vscode",
        "pflannery.vscode-versionlens",
        "MrChetan.phpstorm-parameter-hints-in-vscode",
        "ryannaddy.laravel-artisan",
        "shufo.vscode-blade-formatter",
        "onecentlin.laravel-blade",
        "IHunte.laravel-blade-wrapper",
        "glitchbl.laravel-create-view",
        "amiralizadeh9480.laravel-extra-intellisense",
        "absszero.vscode-laravel-goto",
        "onecentlin.laravel5-snippets",
        "christian-kohler.path-intellisense",
        "formulahendry.auto-close-tag",
        "formulahendry.auto-rename-tag",
        "streetsidesoftware.code-spell-checker",
        "medo64.render-crlf",
        "miku3920.vscode-render-special-chars",
        "usernamehw.errorlens",
        "EditorConfig.EditorConfig",
        "mikestead.dotenv",
        "DotJoshJohnson.xml",
        "github.vscode-github-actions",
        "mhutchie.git-graph",
        "eamodio.gitlens",
        "GitHub.vscode-pull-request-github",
        "ms-azuretools.vscode-docker"
    ]
}

settings 的話就從自己的設定檔,把相關的設定複製過來

以下是我的設定,然後也放一份到 .vscode/settings.json,原因與上述相同

.vscode/settings.json

{
    "files.eol": "\n",
    "editor.renderWhitespace": "all",
    "editor.unicodeHighlight.allowedLocales": {
        "zh-hant": true
    },
    "phpSniffer.run": "onSave",
    "phpSniffer.autoDetect": true,
    "php.format.codeStyle": "K&R",
    "intelephense.format.braces": "k&r",
    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    }
}

在容器首次啟動時,自動安裝 composer 和 pnpm 函式庫

"postCreateCommand": "chown -R 1000:1000 /var/www/html && composer install && pnpm install"

設定 Dockerfile

這預設的 Image 佔用空間好肥阿,想幫它瘦身一下

先來 docker-compose.yml 看一下是用到的 Dockerfile 在哪裡

找到後就把它打開,我用的是 php 8.2 所以是在 docker/8.2/Dockerfile

ubuntu 和 debian 的 image 大小兩個是差不多的


這邊改成 debian 的主要原因是雖然兩者的指令幾乎沒有差異,但函式庫的名稱還是會有一點點差別,php:8.2 也是基於 debian:12-slim 的,為了避免搞混就都用 debian 這樣

當然你也可以使用檔案更小的 alpine,那套件管理程式就不是 apt-get 而是 apk 了,函式庫的名稱可能會有更多的不一樣,要改的地方就多了

Time Zone 改成台灣,不然顯示的系統時間會差 8 個小時

多加一行 upgrade 將套件更新到最新版

砍掉 sqlite3 libpng-dev python2 librsvg2-bin
加上 python3 nmap,nmap 是用來檢查網路連線的,如果是想用 ping 的話改成 iputils-ping 就可以了

這邊也是一樣,只留會用到的
php8.2 php8.2-cli php8.2-curl php8.2-fileinfo php8.2-mbstring php8.2-pdo php8.2-dom php8.2-zip php8.2-bcmath php8.2-xdebug

bun 先不裝,如果以後要用到也可以再加回來

yarn prostgresql 用不到,mysql-client 前面要加上 default

把 .bashrc 複製進容器,這樣就不用在容器中調整 .bashrc 了

FROM debian:12-slim

LABEL maintainer="Taylor Otwell"

ARG WWWGROUP
ARG NODE_VERSION=18
ARG POSTGRES_VERSION=15

WORKDIR /var/www/html

ENV DEBIAN_FRONTEND noninteractive
ENV TZ=Asia/Taipei

RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

RUN apt-get update \
    && apt-get upgrade -y \
    && mkdir -p /etc/apt/keyrings \
    && apt-get install -y gnupg gosu curl ca-certificates zip unzip git supervisor libcap2-bin python3 dnsutils fswatch nmap \
    && curl -sS 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x14aa40ec0831756756d7f66c4f4ea0aae5267a6c' | gpg --dearmor | tee /etc/apt/keyrings/ppa_ondrej_php.gpg > /dev/null \
    && echo "deb [signed-by=/etc/apt/keyrings/ppa_ondrej_php.gpg] https://ppa.launchpadcontent.net/ondrej/php/ubuntu jammy main" > /etc/apt/sources.list.d/ppa_ondrej_php.list \
    && apt-get update \
    && apt-get install -y php8.2 php8.2-cli php8.2-curl php8.2-fileinfo php8.2-mbstring php8.2-pdo php8.2-dom php8.2-zip php8.2-bcmath php8.2-xdebug \
    && curl -sLS https://getcomposer.org/installer | php -- --install-dir=/usr/bin/ --filename=composer \
    && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
    && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_VERSION.x nodistro main" > /etc/apt/sources.list.d/nodesource.list \
    && apt-get update \
    && apt-get install -y nodejs \
    && npm install -g npm \
    && npm install -g pnpm \
    && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | tee /etc/apt/keyrings/yarn.gpg >/dev/null \
    && echo "deb [signed-by=/etc/apt/keyrings/yarn.gpg] https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list \
    && curl -sS https://www.postgresql.org/media/keys/ACCC4CF8.asc | gpg --dearmor | tee /etc/apt/keyrings/pgdg.gpg >/dev/null \
    && echo "deb [signed-by=/etc/apt/keyrings/pgdg.gpg] http://apt.postgresql.org/pub/repos/apt jammy-pgdg main" > /etc/apt/sources.list.d/pgdg.list \
    && apt-get update \
    && apt-get install -y default-mysql-client \
    && apt-get -y autoremove \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

RUN setcap "cap_net_bind_service=+ep" /usr/bin/php8.2

COPY .bashrc /etc/skel/.bashrc

RUN groupadd --force -g $WWWGROUP sail
RUN useradd -ms /bin/bash --no-user-group -g $WWWGROUP -u 1337 sail

COPY start-container /usr/local/bin/start-container
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
COPY php.ini /etc/php/8.2/cli/conf.d/99-sail.ini
RUN chmod +x /usr/local/bin/start-container

EXPOSE 8000

ENTRYPOINT ["start-container"]

新增 .bashrc 檔案

我們可以直接把 WSL 中的設定複製過來用

cp /etc/skel/.bashrc docker/8.2/.bashrc

開啟檔案

code docker/8.2/.bashrc

在檔案最下方加入這些設定

mkcd () {
    mkdir -p -- "$1" && cd -P -- "$1"
}

parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

parse_date() {
    date "+%Y-%m-%d %H:%M:%S"
}

PROMPT_COMMAND='PS1="\[\e]0;[$(parse_date)] \u@\h: \w\a\]\n\[\033[35m\][$(parse_date)]\[\033[00m\] \[\033[32m\]\u@\h\[\033[00m\] \[\033[33m\]\w\[\033[00m\] \[\033[36m\]$(parse_git_branch)\[\033[00m\]\n\\$ "'

alias l.="ls -d .*"
alias ll="ls -l"
alias lm="ls -al | more"
alias rm="rm -i"
alias vi='vim'
alias h="history"
alias hg="h | grep"

alias cs="vendor/bin/phpcs app config database public routes tests"
alias cbf="vendor/bin/phpcbf app config database public routes tests"

alias unit="vendor/bin/phpunit"
alias pest="vendor/bin/pest"
alias sail="vendor/bin/sail"
alias pc="vendor/bin/pest && cat .phpunit.result.coverage"

alias pa="php artisan"
alias test="php artisan test"

alias npm="pnpm"

修改 .gitignore 檔案

這個專案是用 pnpm 管理前端函式庫的,所以會多一個 .pnpm-store 資料夾,這個不應該加入到 Git 版控之中,要把它排除到例外


重新建立容器

現在要先進到容器裡面,因為在 WSL 中沒有重新打包的選項

點左下方

從容器中重新開啟

開啟後就會出現 Rebuild 的提示,點下去就可以重建容器啦

如果太久沒理它導致訊息消失的話,也可以點這裡重建容器

如果出現發生錯誤的話,可以先點一次重試,這是因為容器正在運行導致的,如果還是出現錯誤的話,就要看是哪一條指令出錯了


現在新的 Image 大小縮小了一半,可喜可賀

舊的會變成 none 可以直接砍了

如果都調到滿意並且沒問題了,記得用 Git 紀錄這次的變更


上一篇
【Walking Skeleton】Day32 - 使用 Laravel Sail 建立開發環境
下一篇
【Walking Skeleton】Day34 - Pest:來寫比 PHPUnit 還要簡潔的自動測試吧!
系列文
嘿,稍等一下!別急著開發功能,先來打造 Walking Skeleton 吧!34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言