I got an error 502 Bad Gateway deploying a simple Angular 2 project to AWS EC2 following these steps:
Enter AWS Region Oregon, and on EC2 click launch new instance. Select Ubuntu 16.04 LTS Select t2.micro Set security settings: ssh 0.0.0.0, (Anywhere or myIP) http 0.0.0.0 (Anywhere) https 0.0.0.0 (Anywhere, or don't set it) Download a .pem key from AWS Move the .pem file to an appropriate folder on your system Change user permission on your .pem file using the command:
chmod 400 {{mypem}}.pem
Navigate to the folder where your .pem file is! (you can use the ‘connect’ button on Amazon AWS to get the next line of code) For PC, the command below might require kitty or putty or bash terminal
ssh -i {{mypem}}.pem ubuntu@{{yourAWS.ip}}
again you can get this exact line of code from Connect on AWS. (The command is found below example).
In the ubuntu terminal: These establish some basic dependencies for deployment and the Linux server.
sudo apt-get update
sudo apt-get install -y build-essential openssl libssl-dev pkg-config
In the ubuntu terminal, one at a time because they require confirmation: (these install basic node and npm)
sudo apt-get install npm
sudo npm cache clean -f
sudo npm install -g n
sudo n stable (or whichever node version you want e.g. 5.9.0)
sudo npm install -g @angular/cli@latest
node -v should give you the stable version of node, or the version that you just installed. Install NGINX and git:
sudo apt-get install nginx
sudo apt-get install git
Enter the folder:
cd /var/www
Clone your project:
sudo git clone {{your project file path on github/bitbucket}}
Set up NGINX Go to nginx’s sites-available directory :
cd /etc/nginx/sites-available
Enter vim:
sudo vim {{project_name}}
vim is a terminal-based text editor for more info see: vim-adventures.com/ or other vim learning tools. The key commands for us are i which allows us to type, esc which turns off insert and then after esc :wq which says write and quit. Paste and modify the following code into vim after hitting i:
server {
listen 80;
location / {
proxy_pass http://{{PRIVATE-IP}}:4200;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
This code says: have the reverse proxy server (nginx) listen at port 80. When going to root /, listen for http requests as though you were actually http:// and the port your server is listening e.g @8000 or @6789 etc.
Learn more from nginx: http://nginx.org/en/docs/http/ngx_http_proxy_module.html
Remove the defaults from /etc/nginx/sites-available
sudo rm default
Create a symbolic link from sites-enabled to sites available:
sudo ln -s /etc/nginx/sites-available/{{project_name}} /etc/nginx/sites-enabled/{{project_name}}
6 Remove the defaults from /etc/nginx/sites-enabled/
cd /etc/nginx/sites-enabled/
sudo rm default
Project Dependencies and PM2 Install pm2 globally (https://www.npmjs.com/package/pm2.5) (https://www.npmjs.com/package/pm2). This is a production process manager that allows us to run node processes in the background.
sudo npm install pm2 -g
Try some stuff with pm2!
cd /var/www/{{project_name}}
pm2 serve
pm2 stop 0
pm2 restart 0
sudo service nginx reload && sudo service nginx restart
At this point, the nginx commands should have shown 2 OKs and you should be off and running. Go to the AWS public IP and see your site live!
But I get the error 502 Bad Gateway, and I am configuring it with port 8080 in protractor.conf.js too.
console output says ONLINE:
ubuntu@ip-172-31-35-149:/var/www/angular-mruanova$ pm2 restart 0
Use --update-env to update environment variables
[PM2] Applying action restartProcessId on app [0](ids: 0)
[PM2] static-page-server-8080 ✓
┌─────────────────────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬────────┬──────────┐
│ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │
├─────────────────────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼────────┼──────────┤
│ static-page-server-8080 │ 0 │ fork │ 11723 │ online │ 1 │ 0s │ 0% │ 10.1 MB │ ubuntu │ disabled │
└─────────────────────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴────────┴──────────┘
Use pm2 show <id|name> to get more details about an app
And now I get this in the browser:
Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working.
Further configuration is required.
For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.
Thank you for using nginx.
Then I execute these:
sudo ng build
sudo ng serve
The console output:
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
I need PM2 to run in port 4200 instead of 8080, but how?
Related How can I deploy my Angular 2 + Typescript + Webpack app and https://angular.io/guide/deployment
