web项目部署上线（无虚拟主机，待学习）

购买阿里云服务器

阿里云服务器ECS

系统镜像使用Ubuntu 20.04 LTS

使用ssh连接服务器，终端或者CMD中执行：$ssh root@x.x.x(阿里云服务器账号名@公网地址)

输入账号密码即可连接上服务器（如果配置公钥，就不用再输入密码了，更加安全）

记得去阿里云的ECS的控制台，看看安全组中，是否开放了必要的端口

安装必要的环境（进入服务器之后，安装必要的运行环境）

$apt update  // 更新软件源

$apt install git // 安装git，用于拉取代码，版本控制等

$curl -sL https:// deb.noadesource.com/setup_14.x | sudo -E bash // 添加hode 14的安装源

$apt install nodejs // 安装nodejs，基础运行环境

$apt install yarn // 安装yarn，用于管理npm依赖

$apt install nginx // 安装nginx，服务器，提供web服务

所有命令，都是在服务器的root用户下执行，所以不用加上sudo

上传代码到云服务器

如果想要把本地的代码上传到服务器上，可以使用的工具有很多，比如：ftp，sftp，scp，git等等

使用git：$git clone xxx（存储代码的远程地址）

打包生成静态文件

进入到项目目录，安装必要的依赖：$yarn

执行打包：$yarn buld

使用ngix解析项目

修改nginx配置，把打包好的静态资源，用nginx来提供web服务

（配置虚拟主机，可以部署多个项目）

$vim /etc/nginx/sites-available/default

按i键进入编辑模式，修改后的内容为：

server{

liesten 80 default_server;

listen [::]:80 default_server;

root /var/www/shop;

index index.html index.htm index.nginx-debian.html;

server_name shop.liiann.com;

location / {

try_files $uri $uri/ =404;

}

location ^~/api/ {

proxy_pass https://***.com // 后端接口地址

add_header 'Access-Control-Allow-Origin' '*' // 解决跨域问题

rewrite ^/api/(.*)$ /$l braek; // 删除配置前缀

}

}

编辑之后按Esc键退出编辑模式，输入:wq保存退出

检查nginx配置，出现success就没问题

$nginx -t

平滑重启nginx：

$nginx -s reload

解析域名

去域名控制台，解析域名，这里解析的域名，要和nginx配置的server_name一致

配置HTTPS

证书申请

浏览器端生成

dns校验（再设置一个解析，验证域名合法性）

验证通过后得到证书，下载证书到本地，在上传到服务器，这里使用scp上传。先传到/tmp目录：

$scp file root@x.x.x:/tmp

去服务器，创建一个目录，用来存放ssl证书：

$cd /etc/nginx

$ mkdir ssl

移动证书到创建的目录：

$mv /tmp/file/etc/nginx/ssl

修改nginx配置

$vim /etc/nginx/sites-available/default

增加内容：

liesten 443 ssl;

ssl_certificate  /etc/nginx/ssl/full_chain.pem;

ssl_certificate_key  /etc/nginx/ssl/private.key;

ssl_session_timeout 5m;

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MDS:!ADH:!RC4;

ssl_protocols TLSv1 TLSv1.1 TLSv1 .2;

ssl_prefer_server_ciphers on;

检查nginx配置，出现success就没问题：

$ nginx -t

平滑重启nginx

$nginx -s reload

nginx配置

server{

listen 80 default_server;

server_name shop.liiann.com;

rewrite ^(.*)https://server_name$1 permanent;

}

server{

liesten 443 ssl default_server;

ssl_certificate  /etc/nginx/ssl/full_chain.pem;

ssl_certificate_key  /etc/nginx/ssl/private.key;

ssl_session_timeout 5m;

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MDS:!ADH:!RC4;

ssl_protocols TLSv1 TLSv1.1 TLSv1 .2;

ssl_prefer_server_ciphers on;

root /var/www/shop/dist;

index index.html index.htm index.nginx-debian.html;

server_name shop.liiann.com;

location / {

try_files $uri $uri/ =404;

}

//配置api的代理

location ^~/api/ {

proxy_pass https://***.com // 后端接口地址

}

}