Steps to Deploy a Website with Front-End and APIs on a Windows Server Virtual Machine in Azure

Steps to Deploy the Website

1. Create a Windows Server VM in Azure

   • Log in to the Azure Portal.
   • Click "Create a resource".
   • Select "Windows Server" and choose the desired version (e.g., Windows Server 2019 or 2022).
   • Configure your VM (size, region, disk type, etc.) and set up administrator credentials.
   • Click "Review + Create" and then "Create" to provision the VM.

2. Configure Network Security Group (NSG)

   • After the VM is created, go to the Networking section of the VM.
   • Ensure that the Network Security Group (NSG) allows inbound traffic on ports 80 (HTTP), 443 (HTTPS), and any other API ports you might need.
   • Open RDP (port 3389) if you need to connect to the VM.

3. Connect to the Windows Server VM

   • In the Azure Portal, go to your VM and click on "Connect".
   • Use RDP to connect with the credentials you set earlier.

4. Install Web Server (IIS)

   • Open Server Manager.
   • Click "Add roles and features".
   • Select "Web Server (IIS)" and install necessary features (e.g., HTTP, HTTPS).
   • Complete the installation.

5. Install Required Software for Front-End and API

   • If you’re using Node.js for the API, download and install Node.js.
   • For .NET Core APIs, download and install it from Microsoft’s official website.
   • For front-end projects (e.g., React, Angular), ensure Node.js, npm, or Yarn are installed.

6. Deploy Front-End Code (HTML, CSS, JS)

   • Navigate to C:\inetpub\wwwroot (default IIS directory).
   • Copy your front-end files (HTML, CSS, JS) into this folder or create a subdirectory (e.g., MyWebsite).
   • Ensure the folder has the correct permissions for IIS to serve the files.

7. Deploy the API

   • Node.js API:
     • Copy your API project to a folder on the VM (e.g., C:\API).
     • Open Command Prompt or PowerShell in the API directory and run npm install to install dependencies.
     • Start the API with node app.js (or relevant entry file).
   • .NET Core API:
     • Publish your application and deploy the files to a directory on the VM.
     • Configure IIS or reverse proxy to the API using Application Request Routing (ARR) if needed.

8. Add a New Website in IIS

   • Open IIS Manager by typing inetmgr in the Run dialog (Windows + R).
   • Alternatively, you can open IIS Manager from Server Manager: Select Tools > Internet Information Services (IIS) Manager.
   • Right-click Sites in the Connections pane and choose Add Website.
   • Configure the site:
     • Site Name: Choose a name for your website (e.g., MyWebsite).
     • Physical Path: Browse to the folder where your website files are stored.
     • Binding: Select http or https for the protocol.
     • Set IP Address to All Unassigned or choose a specific IP.
     • Set Port to 80 for HTTP or 443 for HTTPS.
     • Add Hostname if using a custom domain (e.g., www.mywebsite.com).
   • Ensure IIS_IUSRS or NETWORK SERVICE has read permissions on the website folder.

9. Configure DNS (if using a Custom Domain)

   • In your domain registrar's dashboard, add an A Record pointing your domain (e.g., www.mywebsite.com) to your Azure VM’s public IP.

10. Configure SSL (Optional)

    • If you want HTTPS, install an SSL certificate.
    • In IIS Manager, go to Bindings for your website, edit the https binding (port 443), and select your SSL certificate.
    • If you need a free SSL certificate, you can use Let’s Encrypt.

11. Test the Website

    • After setting up the site, open a web browser and go to:
      • http://localhost (for local testing on the server).
      • http:// (for external access, using the VM’s public IP).
      • http:// (if using a custom domain).

12. Restart IIS (if needed)

    • After adding the website, you may need to restart IIS for changes to take effect.
    • In IIS Manager, right-click the site and choose Restart, or run the following in Command Prompt:

      iisreset