服务器布署（一）：阿里云服务器，配合宝塔使用（网页端宝塔）

宝塔面板的使用

一、Linux服务器(宝塔)

配置：nginx + nodejs + linux + 宝塔

1.常用pm2命令

-- 单页运行（不需要启动项）
node xxx             单页项目测试 
pm2 ls / list        查询pm2 启动的列表
pm2 start  xxx       启动项目(一般后端是app.js)
pm2 stop   xxx       停止项目(name)
pm2 delete Id        停止项目(ID)
pm2 save             保存线程
pm2 restart xxx      重启项目
pm2 logs xxx         监控项目执行日志打印
pm2 flush            清除日志
pm2 flush && pm2 restart app && pm2 logs app
exit                 退出控制台

注意： 端口占用，会导致node 测试启动失败

-- 项目运行（需要有启动项） 
npm run serve                                 vue项目测试
pm2 start npm -- run serve                    pm2使项目持续运行
pm2 start npm  -n myserver -- run start       pm2使项目持续运行并重命名

netstat -anp | grep xxx  用于查看端口号的进程情况
lsof -i:3233             查看3233端口的情况
kill 1111  2222          终止进程

2.安装linux服务器(nginx)

su  root 进入管理员模式  *xie2..1
安装centos镜像, 设置防火墙端口8888
宝塔账号 *x....1
在应用项目下载PM2管理器。（自动运行项目）
阿里云和宝塔都要放行端口


----配置mysql数据库
skip-grant-tables

终端使用 service mysql start
mysql -u root       设置数据库密码
use mysql           选定数据库
flush privileges;   刷新
quit                退出

mysql -uroot -p   登入数据库
  

3.包管理器（npm/yarn)

1.简写管理

vue项目的启动： npm run serve

默认：8080端口

目标：修改为9999端口

• 修改package.json中的script脚本文件， 在serve 属性对应的值，尾部添加 --port=9999

• 运行npm run serve -p 9999

pm2项目的启动： pm2 start index.js

默认：index 名称

目标：修改为express名称

• 修改package.json中的 自定义 script脚本文件， 在start 属性对应的值，尾部添加 --name=express

• 运行pm2 start index -n express

2.yarn与npm

安装依赖中的模块：

• npm install

• yarn 或者 yarn install

运行项目脚本

• npm run start
• yarn start

安装模块（开发或者生产）

• npm install axios -S ( 或者 -D 或者 --save 或者 --dev)

• yarn add axios (自动查找依赖中的包)

全局安装

• npm install axios -g
• yarn add axios global

安装指定版本

• npm install axios@x.x.x
• yarn add axios@x.x.x

注意：与依赖有关的是 package.json 和 pakage-lock.json.

3.测试访问

• 单页测试可以通过端口访问node 开启的 服务，即使这个目录不是pm2子目录下。

• 项目测试可以访问（如：python项目可以，vue项目可以）

• 允许自定义位置，使用pm2。 （如：在www下创建wwwadmin）

4.后端项目

1.root安装路径

root目录

​ 一般不打包运行的项目都会放在这个根目录下。直接在终端 开启 pm2 自动运行项目， 使用的是 nodejs 开发环境。不建议在root目录下建立项目，不仅仅会增加项目管理的复杂性，也会导致发生不必要的错误。

​ 建议在www目录下，建立wwwadmin文件夹，与wwwroot默认根路径同级。

因此可以运行 vue的开发环境 和 nodeJS后端

----后端项目root路径下
开始：创建项目  npm init -y 
     安装模块  npm i express               然后开启项目 

终端   pm2  start  index.js               一直运行  (--name="新名称")
       pm2 delete (ID) 或者 pm2 stop XXX   停止运行
       pm2 list                           查看运行的项目
       nodemon                             node热更新


------持续运行前端项目“开发服务器” root目录下
1.把开发者的项目发送到myxxx目录下，            安装模块
   终端npm  installl 或者 yarn install 
2.npm run serve                            暂时测试
3.pm2 start npm -- run serve               持续运行 （注意： 空格）
4.使用“公网IP +端口号”                       查看项目

2.proxy反向代理

使用的端口： 8000 外网端口 4243 内网端口 （后台项目运行端口）

• 后端项目，如非必要，可以直接使用端口访问。
• 热切换，编辑返回代理，需要在开启状态下使用。
• 反向代理和后端项目开启的端口 必须相同，以代理请求的转发作为处理手段， 目标代理为 公网IP+后端使用的端口
• 如果开启了 “访问限制”， 可能会导致 反向代理 失效
• 注意： 先配置好**后端项目，再开启反向代理*， 最后配置 新域名。如果没有购买域名，也可以使用 当前公网Ip + 其它新的端口
• 使用返向代理后的wwwroot目录可以为空。因为不允许将网站目录设置为 root 关键目录
• 正常运行代理后，当前的域名只能连接到指向的代理 URL，当前空目录下的文件将无效， 类似 script标签引入外部js脚本

3.scripts脚本命令

前言：express 和 koa 专属 脚本，有助于后期的修改。

注意修改原项目脚本命令的端口 --port=xxxx

使用标准的脚本命令运行项目，具有更强的规范性

（1.单页脚本命令：

"scripts": { 
    "default": "pm2 start index.js && pm2 save", 
    "dev": "node index.js", 
    "start": "pm2 start index.js --name=express1 && pm2 save",  
    "stop":"pm2 stop express1 && pm2 delete express1",   
    "search": "lsof -i:4243"
  },

然后使用以下方式启动，依旧可以正常访问， （yarn 可以替换 npm run 前缀）

npm run default 默认运行（默认端口和名称）

npm run dev 运行测试

npm run start 项目运行（1.设置别名）

npm run stop 项目停止（2.设置别名）

npm run search 查看端口（3.配置端口）

pm2 ls 显示当前pm2运行列表

pm2 delete 0 1 2 彻底删除指定id的项目

（2.项目脚本命令

"scripts": {  
    "dpush":"pm2 start npm -- run serve",
    "commit":"yarn build || npm run build",
    
    "push":"pm2 start npm -n myserver -- run serve && pm2 save",
    "cancel":"pm2 stop myserver && pm2 delete myserver",
    "search": "lsof -i:4243"
  },

npm run serve vue项目测试

npm run dpush 项目运行（默认名称+运行命令）

npm run commit 项目打包 （前台项目专属 next.js, react.js）

---

npm run push 项目运行 （1.设置别名+运行命令）

npm run cancel 项目取消 （2.设置别名）

npm run search 查看端口 （3.配置端口）

pm2 ls 显示当前pm2运行列表

pm2 delete 0 1 2 彻底删除指定id的项目

5.前端项目

1.wwwroot路径

----前端项目wwwroot路径下：

1. 新建一个项目文件夹，里面必须包含.htaccess 和.user.ini文件. user.init代表当前文件路径
2. 然后在nginx中选择当前项目
3. 在非wwwroot创建项目，使用常规操作引入文件时，部分建立的网站可能会导致无法在浏览器中浏览。
4. 对于php直接输出文件，浏览器会认为是传输文件，最后会把目标文件下载到本地。但其中html可以正常显示。

2. vue页面丢失

      location / {
        index  /www/wwwroot/www.gobook.com/index.html;   ### 首页
        try_files $uri $uri/ /index.html;          
        ### 将页面重定向index.html, 将路由交给前端处理。
      }
      
      
     //  页面重定向 
     
    {
        path: '/:pathMatch(.*)',   // vue2 使用 * ， 则vue 3 需要正则匹配
        name: 'ErrorPage',
        component: ErrorPage,
        meta: {
            title: 'GoBook——出错啦！页面不存在'
        }
    },

产生问题

只有history模式会出现这种情况，而hash模式下不会。

router hash` 模式我们都知道是用符号#表示的，
如  `website.com/#/login`, `hash` 的值为 `#/login

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误

解决方案

​ vue单页应用，是通过JS来执行视图切换的。当我们进入到子路由时刷新页面，web容器没有相

对应的页面此时会出现404。所以我们只需要配置将任意页面都重定向到 index.html，把路由交

由前端处理。

6.DNS域名解析

购买域名 + 提交备案 （就是提交个人信息）

如果没有成功备案，则域名无法解析到服务器。

1.域名ICP备案

(工信部备案编号： 赣ICP备 xxx号)

​ 首先确认网站类型，是博客网站，还是电商网站等等。网站截图，可以暂时不需要提交。

​ 备案成功后，等待解析到服务器，服务器上传网站。网站的 底部中间 添加 备案号， 以及相应的 备案 官网链接。 以提供工信部门的检查（网站需要有备案名，以及负责人的手机号是否有效）

​ 如果说网站 是涉及会员收费，则需要办理 互联网信息经营性备案。（ICP证）

​ 已经备案域名如不再使用，需要变更备案删除不使用的域名。

注意：备案成功后，需要在30天内将备案域名解析到服务器，否则网站备案会被取消接入。

2.公安联网备案

不上线，就可以不备案网站， 可以跳过此步骤

（目标平台）全国互联网安全管理服务平台

（教程）网站公安备案详细操作流程介绍

（阿里云域名管理）阿里云域名管理

（阿里云填写指南）公安联网备案信息填写指南

（阿里云ICP备案管理） 阿里云ICP备案管理

​

​ 公安联网备案审核通过后，您需在30日内登录全国互联网安全管理服务平台，在您的已备案网站详情中，复制网站公安机关备案号和备案编号HTML代码，下载备案编号图标，并编辑您的网页源代码将公安联网备案信息放置在网页底部。

​ 上面其实是阿里云备案成功，但还需要到 全国互联网安全管理服务平台 办理注册。

• 准备材料： 下载域名证书， 阿里云域名服务管理 - 专属具体域名的“ 管理” 面板 - 下载证书

• 下载图标： 《全国互联网安全管理服务平台》网站首页 - 政策文件- 下载中心 - 首页文件下载

• 注册网站： 注册帐号- 填写个人信息 - 新办网站申请， 最后等待结果

注意：

1. 如果是网站不再开办，则需要提前向 上述提及的网站 提交注册申请。
2. 变更网站信息，也需要及时提交信息修改。

3.DNS云解析

域名的默认端口是80, 因此如果需要使用默认端口，则必须使用不同的域名。

其中，同一个域名，端口，不可注册多个网站。

​ 顶级域名下，有一个指定的二级域名， 域名提供商会提供平台，让购买者自行设置三级域名，可以设置多个。

• 一般设置www为主三级域名
• 图片设置为img
• 文件设置为file

阿里云DNS解析，添加新的三级域名

---

进行到DNS解析，然后选择解析设置，就会在解析设置中看到以下内容。

然后添加三级域名

最后，如果提示成功，显示如下的内容

4.申请SSL证书

如果没有SSL证书，会显示不安全接入。 阿里云提供免费的SSL证书。

**SSL证书（**SSL Certificates）为网站和移动应用（APP）及小程序提供数据HTTPS加密协议访问，保障数据的安全。装载SSL证书产品后自动激活浏览器中显示“锁”型安全标志，地址栏以“https”开头。阿里云提供SSL证书（服务端和客户端），且均支持ECC、RSA 或 SM（国密） 三种加密方式。

阿里云SSL证书申请

申请相应的证书后，然后下载对应服务器软件的证书（如nginx）

然后解压打开key 和 pem 文件。

5.服务器与域名

​ 阿里云备案系统，可以添加新网站，也可以删除网站。（网站也需要备案）

如果网站有任何的信息变化 ，需要提交申请。域名只是锁定了服务器，更换服务器与域名无关。

不是域名不是永久的。还是需要同时购买，域名和服务器。

​ 注意：必须要在底部添加备案号，否则会被注销的。如果工信部通知整改，而逾期未处理，则当前的服务器会被取消接入。

7.网站设置扩展

1.流量控制

限制单个ip的并发访问，可以有效减少不良网站的访问与攻击。

2.反向代理

反向代理可以用于跨域访问，也可以用于将后端项目加域名使用，一般用于包装后端的api。

3.SSL证书

SSL证书用于加密网站，提高网站的安全性。一般有免费的SSL证书，下载证书后，可以直接在宝塔上配置。

更安全，更有效，更标准的也是 付费的

https网站不能发起http请求，需要将所有http请求自动转化为https请求，但也要保证后端的https请求是有效的，前后台才可以正常通信。

使用ssl证书后，出现异常https不能发起http请求。
1.除了在页面上添加meta字段，还需要在nginx上添加以下配置。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
2.nginx配置信息。
 add_header Content-Security-Policy "upgrade-insecure-requests;connect-src *";

宝塔免费SSL证书，在宝塔官网实名认证后，即可在这个面板获取免费的SSL证书

如果出现 “您的连接不是私密连接”, 可以在显示页面敲击“thisisunsafe"， 即可正常显示 。

有下划线的，无法连接nginx。

有短线的，无法使用SSL证书。

4.网站防火墙

一般用于设置请求头。特别是请求头中的cookie， referer ，User-agent等

对于控制访问的请求非常有效，不过这是**付费的**。

5.404防盗链。

如果访问了其它站点的图片，当前网站也将无法访问。

拒绝其它外来请求的访问，同时也屏蔽了外来的资源。

6.访问限制

开启访问限制，访问当前网站时，就需要正确输入密码才可以正常访问。

但这个选项会 阻碍反向代理的使用。一般后端需要自己制定相关的措施，以解决访问限制的问题。

7.重定向

8.伪静态