web系统部署（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 TLSv1TLSv1.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 TLSv1TLSv1.1TLSv1 .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 // 后端接口地址

}

}