上传静态页面至阿里云

上传静态页面至服务器端

上传静态页面应用至服务器端本人目前所知道的方式有两种，一种是通过github托管代码，进入代码仓库settings里面将解析出的域名访问即可直接访问，另一种是通过node的express框架对页面应用开启服务，再通过scp将代码上传至服务器运行(这里博客用的是阿里云的轻量服务器)，服务器端的node环境配合上pm2,即可使用ip加端口的形式即可进行访问

1. 创建一个页面应用,使用express开启服务

// 创建一个脚手架页面
$ vue create demo
// 打包该框架,生成一个/dist文件夹
$ npm run build

hVnfOS.png

//在该同级创建node.js模块，使用express框架开启服务
// node.js
const express=require('express');//引入express框架
const app=express(); //应用实例
app.use(express.static('./dist'));//访问./dist文件夹内容

const port=3003;

app.listen(port,function(err){
  if(err){
    console.log(err);
    return;
  }
  console.log('APP running at http://localhost:'+port+'\n');
});
//编译node.js模块，至http://localhost:3003可访问到
$ node node.js   //APP running at http://localhost:3003

hVuqNd.png

2. 上传页面应用至服务器(scp)

**scp上传文件夹命令：scp -r 文件夹路径 root@120.78.***.**:/dev/dist ** //上传需要输入服务器的密码，上传之前可先给服务器创建快照进行备份，

**scp上传文件命令：scp 文件路径 root@120.78.***.**:/dev **

• scp：上传命令
• -r：上传文件是文件夹
• ./dist：本地需要上传文件的位置
• root@120...：使用 root 用户名登录远程服务器 120....
• :/home/library-book-search/web/：表示保存在远程服务器上的地址

$ scp -r ./dist root@120.78.174.96:/dev/dist //这里需要注意先在服务器端分好文件路径，我这在服务器端/dev下mkdir /dist创建好了dist文件夹
$ scp ./node.js root@120.78.174.96:/dev

hVN2UP.jpg

3、服务器端配置

服务器端要运行node实例模块需要安装node环境，才能运行node实例，不要再傻傻的去百度 "阿里云linux远程连接安装node环境"了，直接切换系统镜像就行了，跳坑跳坑！

hVtz7t.png

查看node版本号,看系统镜像是否切换成功

hVoX0s.jpg

找到scp上传的文件，试着使用node运行

hVTE7R.jpg

然而我们发现直接通过相应的服务器ip加端口进行访问并没有页面，是因为我们必须在服务器端开启相应端口

hVB42V.png

可以访问了🎉🎉🎉

hVTyEn.jpg

hV6r7D.png

可以访问了？大功告成，然而当我们把服务器远程连接窗口一关闭，又访问不了了，那就达不到服务器存在的魅力了，那这个时候就得拿出PM2.5了，咳咳...不对，是pm2,这个时候，我们只要使用pm2 list即可查看当前服务器可托管的node进程，然后找到相应的name 使用pm2 start name就可以一直运行界面了

hVTL8K.jpg