Docker配置Angular项目求助：新手配置文件与运行疑问

Hey there! Let's break down your Docker configuration for the Angular project and get you set up to run it smoothly.

First, let's go through your existing files and address some key issues:

Dockerfile Improvements #

Your current Dockerfile works in theory, but has a few outdated or suboptimal parts:

1. Outdated Node.js Version: node:8.6 is extremely old (released in 2017) and won't be compatible with modern Angular versions. Switch to an LTS (Long-Term Support) version like node:18-alpine—it's lighter and fully supported.
2. Angular CLI Package Name: angular-cli is the old package name; the current official package is @angular/cli. Also, installing it globally can cause version conflicts—better to install it locally as a project dependency.
3. Avoid Overwriting Node Modules: When you mount your local directory to the container, your local node_modules (if any) will overwrite the container's installed dependencies. We'll fix this with a .dockerignore file and an anonymous volume in docker-compose.
4. Port Consistency: Ensure the exposed port matches the one Angular will listen on (your config uses 49153, so we need to make sure ng serve uses this port).

Here's a revised Dockerfile:

# Use a lightweight, supported Node LTS image
FROM node:18-alpine

# Create and set the working directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Copy package files first to leverage Docker's layer caching
COPY package*.json ./

# Install project dependencies (npm ci is more reliable for deterministic installs)
RUN npm ci

# Install Angular CLI locally (avoids global version conflicts)
RUN npm install @angular/cli

# Copy the rest of the project files
COPY . .

# Expose the port your Angular app will use
EXPOSE 49153

# Start the dev server, explicitly specifying the port (matches EXPOSE)
CMD ["npm", "start", "--", "--port", "49153"]

docker-compose.yml Tweaks #

Your compose file is mostly good, but we can add a few improvements:

1. Specify Compose Version: Adding a version tag makes the config more explicit.
2. Protect Node Modules: Add an anonymous volume to prevent your local node_modules from overwriting the container's.
3. Simplify Command: Since we've updated the Dockerfile's CMD, you can remove the redundant command in compose unless you need to override it.

Revised docker-compose.yml:

version: '3.8'
services:
  web:
    build: .
    ports:
      - '49153:49153'
    volumes:
      - .:/usr/src/app/
      # Anonymous volume to keep container's node_modules intact
      - /usr/src/app/node_modules
    environment:
      - NODE_ENV=development

Critical: Add a .dockerignore File #

You must create this file in your project root to prevent unnecessary files from being copied into the container, and avoid overwriting node_modules:

node_modules
dist
.git
.gitignore
.npmrc

Follow these steps to get your Angular app up and running with Docker:

1. Verify Your package.json Script: Make sure your start script is set to run ng serve. It should look like this:

   "scripts": {
     "start": "ng serve"
   }
   

   (We're adding the --port flag via the Docker CMD, so no need to include it here unless you prefer.)
2. Build and Start the Container:
   Open a terminal in your project root and run:

   docker-compose up --build
   

   The --build flag ensures Docker rebuilds the image with your latest config. For subsequent runs, you can omit --build unless you change the Dockerfile or dependencies.
3. Access the App:
   Once the container is running, open your browser and navigate to http://localhost:49153. You should see the Angular welcome page if everything is set up correctly!

• Security: For better security, you can run the container as a non-root user. Add these lines to your Dockerfile after npm install:

  RUN chown -R node:node /usr/src/app
  USER node
  

• File Sync Issues: If you're on Windows or Mac, make sure your project directory is enabled for file sharing in Docker Desktop to ensure local code changes sync to the container.
• Production Build: For a production setup, use a multi-stage build to compile your Angular app and serve it from an Nginx image—but that's a separate step for when you're ready to deploy.

内容的提问来源于stack exchange，提问作者nesalexy