我使用宝塔面板+nuxt+tp6把[全栈导航]重构了——小白也能建网站

文章正文还需 6 分钟

我把全站导航改用nuxt.js+php重新了一遍，受之前的矿挖病毒影响，把服务器从docker换成了宝塔

新版采用技术点

前端nuxt.js 后端thinkphp6 缓存redis 数据库mysql

可视化配置管理后台

新版全栈导航，响应速度更快

宝塔界面

功能丰富，如果需要的安装的同学，咨询官网也可以微信我

安装

php 复制代码

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

自动安装，完成后会有提示面板入口，并且初始化账号和密码

打包nuxt

目录结构

打包

js 复制代码

npm run build

上传文件

将.nuxt 、nuxt.config.js、package.json、static 这四个目录放到服务器中

安装服务环境

安装pm2

以下操作在linux环境中

js 复制代码

npm install pm2 -g

或者宝塔安装，在商店中搜索pm2

PM2的主要特性:

内建负载均衡（使用Node cluster 集群模块）
后台运行
0秒停机重载，我理解大概意思是维护升级的时候不需要停机.
具有Ubuntu和CentOS 的启动脚本
停止不稳定的进程（避免无限循环）
控制台检测
提供 HTTP API
远程控制和实时的接口API ( Nodejs 模块,允许和PM2进程管理器交互 )

安装项目依赖

进入到项目目录

js 复制代码

npm i

通过pm2启动

取了个名字叫itanvs

js 复制代码

pm2 start npm --name "itnavs" -- run start

pm2参数

启动应用

nginx 复制代码

pm2 start npm --name "itnavs" -- run start #启动 itnavs 并执行npm run start
pm2 start script.sh # 启动 bash 脚本

进程管理

nginx 复制代码

pm2 list #列表 PM2 启动的所有的应用程序
pm2 show [app-name] # 显示应用程序的所有信息

停止应用

nginx 复制代码

pm2 stop itnavs  # 停止 itnavs 
pm2 stop all  # 停止所有的应用程序
pm2 stop 0 # 停止 id为 0的指定应用程序

重启应用

nginx 复制代码

pm2 restart all # 重启所有应用

删除应用

nginx 复制代码

pm2 delete itnavs #关闭并删除itnavs
pm2 delete all # 关闭并删除所有应用
pm2 delete 0 # 删除指定应用 id 0

配置域名

添加记录值

所以这个域名的地址是一个二级域名 new.itnavs.com

配置宝塔nginx

通过宝塔新建一个网站，叫new.itanvs.com,这是我的网站，你们取你们自己的

新建网站完成后，需要配置反向代理，因为刚才再linux启动的itnavs项目的地址是http://127.0.0.1:3000，也就是说在服务器中的本地访问地址，现在需要对公网访问，也就是任何人能访问，配置反向代理暴露出去

最终生成的反向代理文件

nginx 复制代码

#PROXY-START/
location ~* \.(php|jsp|cgi|asp|aspx)$
{
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
}
location /
{
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
	#Set Nginx Cache
	proxy_ignore_headers Set-Cookie Cache-Control expires;
	add_header Cache-Control no-cache;
    expires 12h;
}

#PROXY-END/

查看结果

如果在查看的时候的发现，出现
Server error,An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.
大部分原因是在nuxt.js中的asyncData函数或者create函数，因为这两个是在服务端执行的，这里常见的放置请求之类的文件，报错的原因也是请求挂断了

以上原因是在new.itanvs.com 请求的数据是从别个域名发出的，所以跨域了，所以配置反向代理请求地址，解决跨域

，

如代理百度，那你在你的网站路径可以是http://new.itnavs.com/api/test，那么nginx做的工作变成这个实际出的就是 http://www.baidu.com/test，不懂的同学，可以加我

nginx 复制代码

location /api{
  	rewrite  ^/api/(.*)$ /$1 break;
  	proxy_pass http://www.baidu.com/;
}

完成以上配置，刷新网站

这是重写的网站是:https://www.itanvs.com

测试站点是http://new.itanvs.com

目前在测试，因为第一次用宝塔，redis等等，也有好多功能没实现，可能我会偶尔关闭站点

后记

专业网站建站4年，个人擅长vue+php+node+mysql+linux，如有不懂同学加我沟通，本职前端，网络爬虫，小程序，webapp，pc站