README.txt
==========

Project: Multistage Docker Setup for Vue.js Frontend + ASP.NET Core Backend on IIS
-----------------------------------------------------------------------------------

This project demonstrates a multistage Docker build that:

  • Builds a Vue.js single-page application  
  • Builds an ASP.NET Core Web API  
  • Combines both into a final IIS-based Windows container  

The result is a single Docker image that serves your front-end on port 80 and your back-end on port 81.

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

1. Prerequisites
----------------
  • Windows host (Server Core) with Docker Desktop installed and set to “Windows containers”  
  • Docker CLI (docker build, docker run) available in PATH  
  • Git (to clone this repo)  
  • Ports 80 and 81 free on your machine  

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

2. Directory Structure
----------------------
/project-root
/front/ ← Vue.js source (package.json, src/, public/)
/back/ ← ASP.NET Core source ( .csproj, Controllers/, Program.cs, etc.)
Dockerfile ← Multistage build instructions
applicationHost.config (optional) ← Custom IIS config
README.txt


––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

3. Dockerfile Explanation
--------------------------
The Dockerfile contains three stages:

Stage 1 – Node build  
  • Base image: Windows Server Core  
  • Installs Node.js  
  • Copies /front, runs `npm install` and `npm run build`  
  • Outputs static files to `C:\app\dist`

Stage 2 – .NET build  
  • Base image: mcr.microsoft.com/dotnet/sdk:6.0-windowsservercore  
  • Copies /back, runs `dotnet publish -c Release`  
  • Outputs binaries to `C:\publish`

Stage 3 – Final IIS image  
  • Base image: mcr.microsoft.com/windows/servercore/iis:ltsc2022  
  • Installs the .NET Hosting Bundle  
  • Copies `C:\app\dist` → `C:\inetpub\wwwroot\front`  
  • Copies `C:\publish`   → `C:\inetpub\wwwroot\back`  
  • Uses PowerShell to create two IIS sites:
      – “FrontApp” on port 80  
      – “BackApp”  on port 81  

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

4. Building the Docker Image
-----------------------------
From the project root, run:

  docker build -t weinno/multistage-app:latest .

This will download all necessary base images, build both front and back ends, and produce a final IIS image.

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

5. Running the Container
-------------------------
Run the container with:

  docker run -d ^
    -p 80:80   `
    -p 81:81   `
    --name multistage-app `
    weinno/multistage-app:latest

  • Your Vue.js app is now at http://localhost/  
  • Your ASP​.NET Core API is at http://localhost:81/

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

6. Configuration Tips
---------------------
  • If you need custom IIS settings, add an `applicationHost.config` next to the Dockerfile.  
  • Verify that your back-end `.dll` names match those in `web.config` if you use one.  
  • Do not enable IIS logging in `web.config` — it may prevent containers from starting.  

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

7. Pushing to Harbor
--------------------
After building, tag and push to your private registry:

  docker tag weinno/multistage-app:latest harbor.weinno.ir/library/multistage-app:latest  
  docker push harbor.weinno.ir/library/multistage-app:latest

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

8. Cleanup
----------
To stop and remove the running container:

  docker stop multistage-app  
  docker rm multistage-app

To remove the image:

  docker rmi weinno/multistage-app:latest

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

9. Support
----------
For questions, see our Confluence page:  
https://confluence.weinno.ir/display/DOCKER/Multistage+Docker+Setup  

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

_Last updated: 20 May 2025_