今天收到一個 Angular 9 的老舊專案，由於我電腦目前的 Node.js 版本太新，無法正常開發，由於我只是單純的想在本機建置專案，所以決定使用 Docker 容器來準備建置環境。這篇文章我就來分享如何快速在容器中打造一個 Angular 的建置環境。
實作步驟
-
先在 Windows 取得原始碼
git clone {GIT_URL}
cd {FOLDER}
-
選擇一個 Node 容器映像
docker pull node:13.14.0-buster
-
建立容器
請用 PowerShell 當成命令列環境，底下的 $(PWD) 代表當前目錄，你可以透過 -v 掛載到容器中。
設定 project-name 為你的容器名稱，以後都可以一直用這個名稱！
使用 -p 可以指定容器的對外連接埠，這邊我們指定 4200 為 Angular 的預設開發連接埠。
docker run -it --name=project-name -v "$(PWD):/usr/src/app" -w /usr/src/app -p 4200:4200 node:13.14.0-buster bash
-
安裝必要 Linux 工具
apt update && apt install -y vim
-
設定一些好用的 Alias
alias ll='ls -alF'
-
初始化 Git 環境
git config --global user.name "Your Name"
git config --global user.email "user@example.com"
git config --global core.editor vim
git config --global core.autocrlf false
git config --global core.quotepath false
git config --global help.autocorrect 30
git config --global color.diff auto
git config --global color.status auto
git config --global color.branch auto
git config --global alias.ci commit
git config --global alias.cm "commit --amend -C HEAD"
git config --global alias.co checkout
git config --global alias.st status
git config --global alias.sts "status -s"
git config --global alias.br branch
git config --global alias.re remote
git config --global alias.di diff
git config --global alias.type "cat-file -t"
git config --global alias.dump "cat-file -p"
git config --global alias.lo "log --oneline"
git config --global alias.ls "log --show-signature"
git config --global alias.ll "log --pretty=format:'%h %ad | %s%d [%Cgreen%an%Creset]' --graph --date=short"
git config --global alias.lg "log --graph --pretty=format:'%Cred%h%Creset %ad |%C(yellow)%d%Creset %s %Cgreen(%cr)%Creset [%Cgreen%an%Creset]' --abbrev-commit --date=short"
git config --global alias.alias "config --get-regexp ^alias\."
git config --global alias.ignore '!'"gi() { curl -sL https://www.gitignore.io/api/\$@ ;}; gi"
cat <<EOF > ~/.vimrc
syntax on
set background=dark
let &t_SI .= "\<Esc>[?2004h"
let &t_EI .= "\<Esc>[?2004l"
inoremap <special> <expr> <Esc>[200~ XTermPasteBegin()
function! XTermPasteBegin()
set pastetoggle=<Esc>[201~
set paste
return ""
endfunction
EOF
-
安裝 npm 套件
npm install
-
建立 ng 命令的 Alias
alias ng='./node_modules/.bin/ng'
-
建置 Angular 應用程式
ng build --prod
更好的開發環境
如果你想打造一個可供開發的環境，甚至於可以在 Visual Studio Code 開發專案，同時又不希望在本機安裝舊版的 Node.js，那麼你可以考慮使用 Visual Studio Code Dev Containers 工具來打造完美的容器開發環境。
相關連結