将Angular 2部署到AWS EC2

时间:2017-08-28 18:48:05

标签: angular amazon-web-services amazon-ec2

我收到错误502 Bad Gateway按照以下步骤将简单的Angular 2项目部署到AWS EC2:

输入AWS Region Oregon,在EC2上单击启动新实例。 选择Ubuntu 16.04 LTS 选择t2.micro 设置安全设置: ssh 0.0.0.0,(Anywhere或myIP) http 0.0.0.0(任何地方) https 0.0.0.0(任何地方,或不设置) 从AWS下载.pem密钥 将.pem文件移动到系统上的相应文件夹中 使用以下命令更改.pem文件的用户权限:

chmod 400 {{mypem}}.pem

导航到.pem文件所在的文件夹! (您可以使用Amazon AWS上的“连接”按钮获取下一行代码) 对于PC,以下命令可能需要kitty或putty或bash终端

ssh -i {{mypem}}.pem ubuntu@{{yourAWS.ip}} 

再次,您可以从AWS上的Connect获取这一系列代码。 (该命令见下面的例子)。

在ubuntu终端中: 这些为部署和Linux服务器建立了一些基本的依赖关系。

sudo apt-get update
sudo apt-get install -y build-essential openssl libssl-dev pkg-config

在ubuntu终端中,一次一个,因为它们需要确认: (这些安装基本节点和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应该为您提供稳定版本的节点或刚刚安装的版本。 安装NGINX和git:

sudo apt-get install nginx
sudo apt-get install git

输入文件夹:

cd /var/www

克隆你的项目:

sudo git clone {{your project file path on github/bitbucket}}

设置NGINX 转到nginx的sites-available目录:

cd /etc/nginx/sites-available

输入vim:

sudo vim {{project_name}}

vim是一个基于终端的文本编辑器,有关详细信息,请参阅:vim-adventures.com/或其他vim学习工具。 对我们来说关键命令是i允许我们输入,esc关闭插入,然后在esc:wq之后写入和退出。 点击i后,将以下代码粘贴并修改为vim:

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;
    }
}

此代码说:让反向代理服务器(nginx)监听端口80。 当去root /时, 听取http请求,好像你实际上是http://以及服务器正在侦听的端口,例如@ 8000或@ 6789等。

从nginx了解详情:http://nginx.org/en/docs/http/ngx_http_proxy_module.html

从/ etc / nginx / sites-available

中删除默认值
sudo rm default

创建从已启用网站到可用网站的符号链接:

sudo ln -s /etc/nginx/sites-available/{{project_name}} /etc/nginx/sites-enabled/{{project_name}}

6从/ etc / nginx / sites-enabled /

中删除默认值
cd /etc/nginx/sites-enabled/
sudo rm default

项目依赖项和PM2 全局安装pm2(https://www.npmjs.com/package/pm2.5)(https://www.npmjs.com/package/pm2)。 这是一个生产流程管理器,允许我们在后台运行节点流程。

sudo npm install pm2 -g

用pm2尝试一些东西!

cd /var/www/{{project_name}}
pm2 serve
pm2 stop 0
pm2 restart 0
sudo service nginx reload && sudo service nginx restart

此时,nginx命令应显示2 OK,您应该关闭并运行。 转到AWS公共IP并立即查看您的网站!

但我收到错误502 Bad Gateway, 我在protractor.conf.js中使用端口8080配置它。

控制台输出显示ONLINE:

ubuntu @ ip-172-31-35-149:/ var / www / angular-mruanova $ pm2 restart 0 使用--update-env更新环境变量 [PM2]在app [0]上应用action restartProcessId(ids:0) [PM2] static-page-server-8080✓ ┌─────────────────────────┬────┬──────┬───────┬─── ─────┬─────────┬────────┬─────┬───────────┬─────── ─┬──────────┐ │应用程序名称│id│模式│pid│状态│重启│正常运行时间│cpu│mem│用户│观看│ ├─────────────────────────┼────┼──────┼───────┼─── ─────┼─────────┼────────┼─────┼───────────┼─────── ─┼──────────┤ │静态页面服务器-8080│0│前叉│11723│在线│1│0s│0%│10.1MB│ubuntu│残疾人│ └─────────────────────────┴────┴──────┴───────┴─── ─────┴─────────┴────────┴─────┴───────────┴─────── ─┴──────────┘  使用pm2 show <id|name>获取有关应用的更多详细信息

现在我在浏览器中看到了这个:

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.

然后我执行这些:

sudo ng build
sudo ng serve

控制台输出:

** NG Live Development Server正在侦听localhost:4200,在http://localhost:4200上打开浏览器**

我需要PM2在端口4200而不是8080中运行,但是如何?

相关How can I deploy my Angular 2 + Typescript + Webpack apphttps://angular.io/guide/deployment

1 个答案:

答案 0 :(得分:1)

请参阅此处的链接 - How to specify a port number for pm2

您基本上需要为端口设置环境变量。

相关问题