阿里云 ECS服务器部署node项目，配置nginx反向代理转发请求2020年的前端已经不再局限于JS、css，大前端的

背景

1. 2020年的前端已经不再局限于JS、css，大前端的趋势更是前端工程化、前端全栈化，通过node.js也让前端同学有了独立运作网站的能力。
1. 作为一名前端开发，除了能在本地完成开发工作，了解项目上线的部署工作是一件很cool的事情，当然也能加深你对前端的理解，

本文对建站小白非常友好，本文即是本人首次部署经验。如果有大佬能提出指导意见，必将感激不尽！

服务器选择

各大云服务器运营商优惠力度都很大，最常见的莫过于阿里云。
个人建站目标是作为一个博客以及做一些感兴趣的项目，总的来说对服务器要求不高，于是选择了aliyun-云翼计划。条件很是诱人：24岁以下自动获得学生身份,学生优惠套餐.新用户ECS 9.5元/月送存储、数据库，总的来说，如果要求不高，这个套餐还是很划算的。

1. 登录服务器

aliyun云服务器支持网页登录和shell中登录。

1. 网页登录，会自动获取实例，输入用户名和密码即可
1. 使用shell登录，win + r，输入cmd打开shell，输入命令

用户名 ssh@公网ip

即可连接服务器。推荐一款神器Xshell，一次配置，再次登录免密码。同时附带软件Xftp，浏览服务器上的文件夹跟本地一模一样，支持拖拽上传到服务器，用它！

ps，购买后初次登录需要重置实例密码

2. 配置环境

安装node

aliyun文档写的很详细，根据步骤一步一步来即可。

aliyun文档-部署Node.js环境

1. 使用二进制安装(步骤稍麻烦)
1. 使用nvm安装，支持安装多个版本(个人安装方式)。

安装过程就不一一列出了，大家查看阿里官方文档即可。

**使用nvm安装的一点小尴尬：使用nvm安装后，如果没有指定默认版本，每次关闭shell后再登录进服务器的时候，需要每次手动选择node版本，命令(nvm use v8.11.4)，否则会报错。设置默认版本命令：nvm alias default version **

node报错

3. 上传服务端文件

本文node框架选用用express框架，demo文件放在github

1. 使用Xshell打开Xftp，将打包后的文件夹拖拽入服务器任意文件夹。

1. 在Xshell中切换服务器文件夹为项目文件夹，使用命令拉取依赖

npm install

1. 使用命令启动express服务

npm start

1. 云服务器控制台-网络与安全-安全组，选择配置规则-添加安全组规则，开放80端口

开放80端口

1. 在浏览器中访问,就可以看到Hello world了。至此服务端项目就配置好了

http://你的公网ip

4. 安装nginx

1. 使用命令安装nginx

yum install nginx

1. 使用命令启动nginx

service nginx start

1. 直接浏览器访问你的公网ip就会出现Nginx的欢迎界面
1. 创建nginx配置文件

nginx默认安装在了/etc/nginx/目录下，nginx安装后会默认写入conf.d配置文件，访问路径：/etc/nginx/conf.d。为了后续扩展需要，个人选择创建conf.d文件夹，并在此文件夹下创建default.conf文件，在此文件夹里写入nginx配置。

5. 上传静态网页文件

1. 使用webpack打包生产环境文件，一般命令为

npm run build

1. 使用Xshell打开Xftp，将打包后的文件夹拖拽入服务器任意文件夹。例：打包后的文件夹dist上传至服务器某文件夹，如/usr/share/nginx/html/dist(后续配置nginx会用)

6. 配置nginx

1. 打开/etc/nginx/conf.d/default.conf,配置访问80端口默认网页文件以及转发请求

server {
    listen       80;
    server_name  localhost; //localhost地址实际为你的公网ip
    location / {
       root   /usr/share/nginx/html/dist;
        index  index.html;  //该文件为/usr/share/nginx/html/dist目录下的index.html文件
    }
    location /auth {
         proxy_pass http://localhost:端口 ;  //根据请求转发至其他端口，该端口号应与服务端文件express-demo/bin/www 里配置的端口一致
     }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}
//如果需要反向代理更多端口以及地址，可以增加server

1. 使用命令重启nginx

service nginx restart

1. 开放80端口（参考上传服务端文件-步骤5，如已开放，本步可跳过）
1. 浏览器中访问你的公网ip就会出现打包后的页面了~

连接服务器使用的软件：Xshell,Xftp(个人使用是免费的，只需填入用户名和邮箱)。下载链接

阿里云 ECS服务器部署node项目，配置nginx反向代理转发请求

背景