如何在EC2上部署webpack打包项目

本篇主要包含以下几部分：

1. EC2的申请与配置注意
2. ubuntu服务器相关配置
3. nginx的配置及域名访问

项目的整体配置及版本：

• 服务器类型：AWS EC2服务器
• 服务器系统：Ubuntu 18.04
• nvm版本：0.33.2
• node版本：11.13.0
• npm版本：6.7.0
• vue版本：2.9.6
• nginx版本：1.14.0 (Ubuntu)
• git版本：2.21.0

EC2的申请与配置注意

首先你必须有一个亚马逊账户，进入AWS的控制面板，通过服务/计算/EC2进入到下一层的控制面板中，然后点选启动实例，选择服务器的相关配置等等。

在这一些操作后，你需要新建一个安全组来允许你从远程访问。关于安全组的配置，可以参考下图：

80端口和8080端口开发用于让我们通过域名或IP地址访问我们的站点，22端口用于我们通过SSH来链接远程服务器，进行相关的配置。

出站规则设置成全部端口，任意IP均可访问即可。

全部完成后，就可以在实例中看到我们部署好的服务器，类似第一张图，点击我们刚部署好的服务器，可以看到服务器的ip地址（红框内容），用户可以通过ip来进行访问，也用于我们最后要配置的域名解析：

再点击“连接”按钮，会给我们连接所需的相关信息：

其中 公有DNS 便是我们连接的主机，默认端口号为22，接下来可以使用合适的SSH客户端来链接远程主机。

• Mac：FinalShell
• Windows：Xshell

接下来以FinalShell为例，我们来链接远程服务器：

然后点击文件夹，选择ssh链接：

然后填写链接相关信息：

名称随意，主机即为刚才的 公有DNS 认证方式选择公钥认证，用户名填写 ubuntu ，私钥即为刚才创建实例所保存的 .pem 文件，全部填写完毕后点击确定，即可链接远程服务器。

ubuntu服务器相关配置

1
2
3

~$: sudo apt install curl
~$: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
(执行完这一步后需要重启shell，直接把当前shell关闭再重新进入就好了，否则nvm命令无法找到)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

~$: nvm --version // 查看nvm版本
~$: nvm ls-remote // 查看node版本
~$: nvm install v11.13.0 // 下载指定node版本
~$: node --version
~$: npm --version 
(node相关配置完毕)
~$: npm install -g vue-cli
(vue相关配置完毕)
~$: sudo add-apt-repository ppa:git-core/ppa // 部署国内服务器可以不做这一步
~$: sudo apt-get update
~$: sudo apt-get install git
(git相关配置完毕)
~$: sudo apt-get install nginx
(nginx安装完毕)

接下来我们需要把项目clone到服务器上，可以借助github来完成这一步，当然有兴趣的同学可以使用webstorm的deployment来完成这一步。

1
2
3

~$: git clone https://github.com/[xxxx]/[projectName].git
~/[projectName]$: cd [projectName] && npm install
~/[projectName]$: npm run build

上述操作完成后，我们的项目已经完成了打包并存放在我们的服务器上了，这是其实可以通过 run dev 然后使用共有 ip + 端口号访问了，接下来我们将使用nginx实现域名的访问。

nginx的配置及域名访问

首先我们准备好域名，去阿里云或者腾讯云上搞一个域名，全部审批完后，点击域名解析：

然后点击新手引导来添加服务器的ip地址（之前我们保存的服务器公有IP），保存确认即可：

搞定好这个之后，我们回到SSH上完成nginx代理。之前我们已经安装好了nginx，接下来进行nginx的配置：

1
2

~$: cd /etc/nginx
/etc/nginx$: sudo vim nginx.conf

然后修改相关配置：

1
2
3
4
5
6
7
8
9
10
11
12

http {
    ...
     server {
                listen          80;
                server_name     xxx.cn;

                location / {
                        root    /home/ubuntu/[projectName]/dist;
                        index   index.html;
                }
        }
}

然后按下esc，输入 :wq 保存退出，

接着在终端中重启nginx：

1

/etc/nginx$: sudo service nginx restart

这样我们服务器端就全部配置完成了，可以愉快的通过域名来访问了。