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

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

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/832a48c0141fca452d48-0183d907-c679-450c-b650-fb1ce7930ddc.webp)

### 實作步驟

1.  先在 Windows 取得原始碼
    
    ```bash
    git clone {GIT_URL}
    cd {FOLDER}
    ```
    
2.  選擇一個 [Node](https://hub.docker.com/_/node/) 容器映像
    
    ```bash
    docker pull node:13.14.0-buster
    ```
    
3.  建立容器
    
    請用 PowerShell 當成命令列環境，底下的 `$(PWD)` 代表當前目錄，你可以透過 `-v` 掛載到容器中。
    
    設定 `project-name` 為你的容器名稱，以後都可以一直用這個名稱！
    
    使用 `-p` 可以指定容器的對外連接埠，這邊我們指定 `4200` 為 Angular 的預設開發連接埠。
    
    ```bash
    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 工具
    
    ```bash
    apt update && apt install -y vim
    ```
    
5.  設定一些好用的 Alias
    
    ```bash
    alias ll='ls -alF'
    ```
    
6.  初始化 Git 環境
    
    ```bash
    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 套件
    
    ```bash
    npm install
    ```
    
8.  建立 ng 命令的 Alias
    
    ```bash
    alias ng='./node_modules/.bin/ng'
    ```
    
9.  建置 Angular 應用程式
    
    ```bash
    ng build --prod
    ```
    

### 更好的開發環境

如果你想打造一個可供開發的環境，甚至於可以在 Visual Studio Code 開發專案，同時又不希望在本機安裝舊版的 Node.js，那麼你可以考慮使用 [Visual Studio Code Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers) 工具來打造完美的容器開發環境。

### 相關連結

-   Docker Hub
    -   [node - Official Image](https://hub.docker.com/_/node/)
-   [Development containers](https://containers.dev/)
    -   [Overview](https://code.visualstudio.com/docs/devcontainers/containers)
    -   [Tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial)
    -   [Attach to Container](https://code.visualstudio.com/docs/devcontainers/attach-container)
    -   [Create a Dev Container](https://code.visualstudio.com/docs/devcontainers/create-dev-container)
    -   [Advanced Containers](https://code.visualstudio.com/docs/devcontainers/containers-advanced)
    -   [devcontainer.json](https://code.visualstudio.com/docs/devcontainers/devcontainerjson-reference)
-   [使用 VSCode 的 Remote Container 建立 SAP Commerce 123 開發環境](/post/2022/09/26/VSCode-Remote-Container-SAP-Commerce-123)