1、远程连接服务器;

 mac环境连接方式,打开终端命令,点击左上角Shell-新建远程连接;输入ip地址,输入用户名密码点击连接。
2、部署Node.js环境, 使用nvm安装多个Nodejs版本:

  1> 使用Git将源码克隆到本地的~/.nvm目录下,并检查最新版本;

yum install git
git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

   2> 激活nvm

echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile

  3> 列出所有node版本

nvm list-remote

  4> 安装指定版本; 

nvm install v7.4.0
nvm install v14.16.0

  5> 运行nvm ls查看已安装的Node.js版本。运行nvm use <版本号>使用指定版本

nvm use v14.16.0

3、node启动服务,搭建项目(mac可以下载filezilla客户端连接站点)

 新建文件在根目录新建server.js,需要手动安装插件mime-types

const PORT = 3000;

const http = require('http');
const url=require('url');
const fs=require('fs');
const mime=require('mime-types');
const path=require('path');

const server = http.createServer(function (request, response) {
    var pathname = url.parse(request.url).pathname;
    var realPath = path.join(__dirname, pathname);
    console.log(pathname, realPath)
    var ext = path.extname(realPath);
    ext = ext ? ext.slice(1) : 'unknown';
    const mimetype = mime.lookup(ext);
    fs.readFile(realPath, "binary", function (err, file) {
        if (err) {
            response.writeHead(404, {
                'Content-Type': 'text/plain'
            });

            response.write("This request URL " + pathname + " was not found on this server.");
            response.end();
        } else {
            const contentType = mimetype || "text/plain";
            response.writeHead(200, {
                'Content-Type': contentType
            });
            response.write(file, "binary");
            response.end();
        }
    });
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");

执行node ~/server.js。这里需要注意 这种方式启动项目,关闭终端就会终止。服务器需要永久启动可以安装forever:

npm install forever -g
forever start server.js //启动服务

vue项目打包后生成dist文件,通过FileZilla直接在根目录创建website文件,将dist放在website文件下;部署成功;

浏览器访问http://ip地址:3000/website/dist/index.html可成功访问项目。

这样的路径访问很难看,可以使用nginx做处理。

4、nginx代理实现域名指向指定页面。

  执行命令进入nginx配置

[root@iZbp1i8olg1gg9sd30qht7Z ~]# cd /etc/nginx

[root@iZbp1i8olg1gg9sd30qht7Z nginx]# vim nginx.conf

修改server的配置

server {

        listen       80;

        # listen       [::]:80;

        server_name  hedouya.cn; 备案好的域名

        location / {

            proxy_pass  http://127.0.0.1:3000; 服务器IP和端口

        }

 

        # Load configuration files for the default server block.

        # include /etc/nginx/default.d/*.conf;

 

        error_page 404 /404.html;

            location = /40x.html {

        }

 

        error_page 500 502 503 504 /50x.html;

            location = /50x.html {

        }

    }

    server {

        listen       80;

        server_name  a.hedouya.cn; 浏览器直接访问的域名,可以是二级域名三级域名

        location / {

            root   /root/website/dist; // 项目部署的根目录

            index  index.html index.htm;

        }

    }

检查nginx配置是否正确

[root@iZbp1i8olg1gg9sd30qht7Z nginx]# nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

nginx: configuration file /etc/nginx/nginx.conf test is successful

 

配置正确后,启动nginx

[root@iZbp1i8olg1gg9sd30qht7Z nginx]# nginx

启动成功后可在浏览器输入a.hedouya.cn直接访问页面。

可输入命令ps  -ef | grep nginx 查看nginx启动状态和端口,kill 端口号可关闭nginx进程。

[root@iZbp1i8olg1gg9sd30qht7Z nginx]# ps  -ef | grep nginx
root        7496    7234  0 14:16 pts/1    00:00:00 vim nginx.conf
root        7745       1  0 14:50 ?        00:00:00 nginx: master process nginx
root        7746    7745  0 14:50 ?        00:00:00 nginx: worker process
root        7944    7779  0 15:43 pts/2    00:00:00 grep --color=auto nginx
[root@iZbp1i8olg1gg9sd30qht7Z nginx]# 

异常情况1:遇到nginx启动报错的话 可以检查是不是端口被占用,查看端口占用情况:

[root@iZbp1i8olg1gg9sd30qht7Z nginx]# netstat  -anp  |grep 80
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      7745/nginx: master  
tcp        0      0 172.18.89.90:22         114.247.34.65:35805     ESTABLISHED 7413/sshd: root [pr 
tcp        0      0 172.18.89.90:44818      100.100.30.26:80        ESTABLISHED 927/AliYunDun       
tcp6       0      0 172.18.89.90:3000       8.136.81.33:35280       TIME_WAIT   -    

异常情况2:nginx配置成功后,在浏览器访问域名报404。

查看nginx报错日志

[root@iZbp1i8olg1gg9sd30qht7Z nginx]# vim /var/log/nginx/error.log
2022/02/23 14:48:43 [error] 7679#0: *1 "/website/code/dist/index.html" is not found (2: No such file or directory), client: 114.247.34.65, server: bosch.hedouya.cn, request: "GET / HTTP/1.1", host: "bosch.hedouya.cn"

可以看到目录找不到,需要检查目录是否正确。这里配置的时候报错了 因为少了一层root目录,nginx中配置root 需要把root这一层目录写上,也就是正确根目录配置是:/root/website/dist。