【网站部署】Vue+ThinkJS 个人博客网站部署

非常厉害
432 阅读5分钟

服务器：阿里云 Ubuntu20.04 64位

第一步：配置安全组规则

先配置实例的安全组规则，打开 80、8360 端口。 只有配置了安全组规则，才能够通过 公网IP:端口 访问到我们的网站。

image.png

第二步：安装宝塔Linux面板

宝塔面板 的官网把安装步骤写的很详细了，按步骤来肯定能安装成功的，安装成功之后，进入到面板首页。

首次进入面板的时候，会跳出个一键部署选择项，有LNMP和LAMP两种，我们选择 LNMP，然后面板就会帮我们进行Nginx、MySQL、PHP的安装了，这里什么都不用动，静静等待安装完成。

如果没有一键部署，可以去到面板的软件商店中找到需要的软件，安装好。

image.png

第三步：安装NodeJS

安装NodeJS是为了能运行我们的后台系统 ThinkJS。

# 首先安装npm
sudo apt install npm
# 然后安装n
sudo npm install n -g
# 最后安装node lts版本
sudo n lts
# npm 更新
npm install npm -g

在安装npm的时候可能会报这个错误：Unable to locate package npm，只需执行下面的命令后再重新安装。

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install npm

执行完 npm i npm -g 之后，node就已经安装完毕了，此时执行 node -v 如果出现了版本号，说明安装成功。

第四步：部署前端Vue项目

首先把前端项目打包好，然后在宝塔面板，打开软件商店，点击已安装，进入到Nginx安装目录

image.png

进入到html目录，新建一个frontend目录，然后将前端项目打包后dist目录中的文件放入frontend目录中

image.png

接着进入到conf目录，找到 nginx.conf 文件，双击打开，编辑。

# nginx.conf文件
# ... 省略
server {
    listen 80;
    server_name localhost;
    location /
    {
        root html/my-blog-frontend;
        index index.html index.htm;
    }
}

将上面的这个serve块放到文件中本来就存在的一个 listen 888 的serve块下面，注意，是下面，不是里面，放好之后，配置文件中的http块应该是如下结构的:

http
{
    server {
        listen 888
        # .... 省略
    }
    server {
        listen 80
        # .... 省略
    }
}

然后在面板中重载nginx的配置，不放心的话可以停止后重新启动。

image.png

做完上面的步骤，此时在浏览器中输入：你服务器的公网IP，点击回车，应该会出现你的网站。静态的，因为没配置后台。

第五步：后台部署

首先也是在nginx安装目录下的html目录中新建一个backend目录，然后把后台项目上传到该目录（切记不要上传node_modules目录），然后在backend目录打开终端，执行 npm install 进行依赖安装。

安装完依赖后，执行 npm start，启动项目，不出意外的话，会报错：

EACCES: permission denied, open '/www/server/nginx/html/my-blog-backend/runtime/config/development.json

字面意思，权限被拒绝了，也就是权限不够，我们找到对应的 development.json 文件，然后将它的权限改成777，再重新跑一次 npm start 即可。

image.png

除了这里，还有一个地方我们也要去改一下，那就是 src/config/config.js，我们要在其中添加如下内容：

module.export = {
    workers:1,
    host:'0.0.0.0',
    port:'8360'
}

要注意的是，这里有一个前提条件就是：后台的数据库已经搭建好了以及数据库配置都已经配置好了，不然的话，启动还是会报错的。

ThinkJS默认的端口是8360，所以我们要去放行该端口，来到面板的安全 选项中，在放行端口中输入8360，点击放行即可。

image.png

这里要注意，我们一共对端口进行过两次配置，一次是服务器的安全组规则，一次是这里的放行端口，两者缺一不可。
接下来就是最最最重要的一步了，Nginx的配置。

再次打开 nginx.conf 文件，在我们上面添加的server块，替换成下面这个server块：

server {
    listen 80;
    server_name localhost;
    set $node_port 8360;

    location / {
        root html/my-blog-frontend;
        index index.html index.htm;
    }
    
    location ~ ^/api/(.*)$ {
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://127.0.0.1:$node_port/$1$is_args$args;
        proxy_redirect off;
    }

    location ~ /static/ {
        etag         on;
        expires      max;
    }
}

上面的配置中，有两点需要注意的地方：

location ~ ^/api/(.*)$

上面这个点的意思是，当访问的url中有 api 字段存在的时候，就代理到这个location中。
因为前端Vue项目跨域都会配置代理，导致我们的请求会变成 xxx.com/api/实际请求地址，也就是多了一个 /api/，部署的时候这个就很致命了，因为这样会导致报404，找不到对应的接口。而解决办法就是我们下面的这个点。

$is_args$args

  • $is_args
    当有 $args (和$query_string一样) 时，此处为 ? 否则为空
  • $args
    和 $query_string 一致，表查询字符串即，GET 参数

弄完上面这些，保存，然后重载配置。

然后再次在浏览器中输入你的公网IP，回车，就可以访问到你的网站啦！

image.png

第六步：使用pm2来启动后台项目

安装pm2

npm i -g pm2

然后执行

pm2

如果出现下面的这些内容，就说明安装成功了

image.png

如果显示说找不到pm2，那就给pm2做一下连接，先执行下面的命令，获取pm2在本机的安装路径

whereis pm2 # 获取pm2的安装路径 => pm2: /usr/local/bin/pm2

用上面得到的安装路径做一下连接

ln -s /usr/local/src/node/bin/pm2 /usr/local/bin/pm2

安装成功之后，我们就通过pm2来启动项目，先去到项目的根目录，打开终端，输入以下命令

# 原项目启动时使用 npm start，现在则使用pm2 start
pm2 start development.js  # 启动development.js应用 因人而异
# 或者
pm2 start development.js --name backend # 启动应用并设置name为backend
# 监听模式
pm2 start development.js --watch # 当文件发生变化时自动重启

输入上面的命令后，没报错就是启动成功了，我们可以通过 pm2 list 来查看启动了的应用列表。

image.png

到这里就ok了，补充几个pm2的指令

# 停止应用
pm2 stop all # 停止所有应用
pm2 stop name # 根据应用名停止指定应用 比如我停止上面启动的应用 pm2 stop development
pm2 stop id # 比如 pm2 stop 0, 因为在list中我启动的development的id是0
# 删除应用
pm2 delete all   # 关闭并删除应用
pm2 delete name # 根据应用name关闭并删除应用
pm2 delete id  # 根据应用id关闭并删除应用
# 设置开启启动
pm2 startup
# pm2更新
pm2 update
# 重新启动
pm2 restart development.js

完结，撒花~

avatar
文章
阅读
粉丝