nginx - How can I deploy my Angular 2 + Typescript + Webpack app

Question

I am actually learning Angular 2 with Typescript and developed a little app by based on the angular-seed project (angular-seed). I have built the app for production purposes and got dist folder ready to be deployed containing my bundle files like this:

dist/                    
  main.bundle.js              
  main.map         
  polyfills.bundle.js          
  polyfills.map            
  vendor.bundle.js         
  vendor.map

However, as a fresher, I have no idea how to deploy it now on my EC2 server. I read that I have to config Nginx server to serve my static file but do I have to config it particularly to work with my bundle files?

Excuse my mistakes if any. Thanks a lot in advance!

Answer 1

You are on the right track.....

Just install the nginx on your EC2. In my case I had a linux Ubuntu 14.04 installed on "Digital Ocean".

First I updated the apt-get package lists:

sudo apt-get update

Then install Nginx using apt-get:

sudo apt-get install nginx

Then open the default server block configuration file for editing:

sudo vi /etc/nginx/sites-available/default

Delete everything in this configuration file and paste the following content:

server {
    listen 80 default_server;
    root /path/dist-nginx;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ =404;
    }
}   

To make the changes active, restart the webserver nginx:

sudo service nginx restart

Then copy index.html and the bundle files to /path/dist-nginx on your server and you are up and running.