The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何在 Docker 容器中建置舊版 Angular 應用程式

今天收到一個 Angular 9 的老舊專案,由於我電腦目前的 Node.js 版本太新,無法正常開發,由於我只是單純的想在本機建置專案,所以決定使用 Docker 容器來準備建置環境。這篇文章我就來分享如何快速在容器中打造一個 Angular 的建置環境。

image

實作步驟

  1. 先在 Windows 取得原始碼

    git clone {GIT_URL}
    cd {FOLDER}
    
  2. 選擇一個 Node 容器映像

    docker pull node:13.14.0-buster
    
  3. 建立容器

    請用 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
    
  4. 安裝必要 Linux 工具

    apt update && apt install -y vim
    
  5. 設定一些好用的 Alias

    alias ll='ls -alF'
    
  6. 初始化 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
    
  7. 安裝 npm 套件

    npm install
    
  8. 建立 ng 命令的 Alias

    alias ng='./node_modules/.bin/ng'
    
  9. 建置 Angular 應用程式

    ng build --prod
    

更好的開發環境

如果你想打造一個可供開發的環境,甚至於可以在 Visual Studio Code 開發專案,同時又不希望在本機安裝舊版的 Node.js,那麼你可以考慮使用 Visual Studio Code Dev Containers 工具來打造完美的容器開發環境。

相關連結

留言評論