手把手教你Node.js部署+Vue.js部署

2023-05-05 本文已影响0人剁椒先生

这边文章有点长，有点干，自行备水，直接上干货，先说node后端服务器部署流程，服务器这里是以阿里云为例子，也可以用其他运营商，没啥区别

服务器介绍及初步设置

登录阿里云，点击左侧菜单->云服务器ECS

image.jpeg

进来后如果你已经购买过了就会显示当前服务器，如果没有就去“创建实例”，如果不太懂配置什么的，

你就直接切换到“快速购买”，然后根据自身实力去购买，个人网站的话最低配都没问题。

image.jpeg

购买成功后，阿里云会给你发短信，告诉你账户（默认root）和公网IP。

image.jpeg

购买成功后，直接访问公网IP 是不能访问的，需要配置安全组规则，点击左侧菜单“安全组”--->“匹配规则“

image.jpeg

点击“手动添加”，443、3306、80端口

image.jpeg

下面我们去尝试远程连接服务器
防止我下面误导你，ssh root@123.....（用户：root，公网IP：123.***）有问题，您留言吧！！

Node.js部署

1. 服务器连接及环境安装

经过上面的步骤我门已经有了服务器账号密码，现在可以先尝试一下去远程连接一下，打开终端窗口输入ssh root(账号)@IP 和服务器密码

ssh root@123.**(公网IP)

有可能会提示其他的错比如当前第二次连接，已经有了key，你就要删掉。

image.jpeg

通过输入命令，回车

ssh-keygen -R 123.**(公网IP)

下面就继续重新远程连接，ssh root(账号)@IP 和密码

ssh root@123.**(公网IP)

回车后，会提示你以前没连接过这个服务器，要不要继续连接？输入yes ！

会告诉你已经将你这个公网IP添加到服务器列表当中了！继续重新输入远程连接，ssh root(账号)@IP 和密码

ssh root@123.**(公网IP)

image.jpeg

进入服务器后，通过下面命令，可观察到初始化的文件夹

 // 进入根目录
 cd /
 ls

目录结构图（https://www.runoob.com/linux/linux-system-contents.html）runoob这里有详细的目录解释，阿里云开发社区也有，但是我这下子没找到

image.jpeg

初步认识了服务器后，我们接下来安装环境

// 进入/usr/local目录去安装node、nginx
 cd /usr/local

安装Node

https://nodejs.org/en/download 进入node.js官网下载目录，鼠标右击选择复制链接地址

image.jpeg

在终端窗口中执行

下载node压缩包 node-v16.17.0-linux-x64，

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

下载完成后，执行ls 可以看到当前下载的node 包

node压缩包

image.jpeg

然后我们去解压它,

// 解压 
tar -xvf node-v16.17.*****.tar.xz 
// 解压后可以删除node压缩包，也可以不用,命令是 
rm node-vv16.17.*****.tar.xz

配置全局环境变量，使全局下都能使用node 命令

// 配置全局node 
// 把 /usr/local/node-v16.17.0-linux-x64/bin/node 指向 /usr/local/sbin/node
ln -s /usr/local/node-v16.17.0-linux-x64/bin/node  /usr/local/sbin/node

// 配置全局npm
 ln -s /usr/local/node-v16.17.0-linux-x64/bin/npm  /usr/local/sbin/npm

友情提示开始：

如果是node 版本过高，目前18算高的，访问node -v则会报错，则需要降低版本，下面提一嘴怎么删！！！

image.jpeg

先删除高版本node 以及全局环境变量

//删除文件夹 
rm -rf 文件夹名称

// 删除安装包
 rm 文件名称 
// 进入sbin目录删除node、npm环境变量
cd /usr/local/sbin/
rm -rf node
rm -rf npm

删除后重新安装低版本就好，18的版本是会报错的。

友情提示结束：

安装16.7.0成功后的样子，接下来安装mysql

image.jpeg

安装MySQL

进入mysql官网 https://downloads.mysql.com/archives/shell/ 复制下载链接, 用我提供的也行，也是新的！

image.jpeg

进入/usr/local目录下下载mysql 安装包

[root@hecs-79640 local]# rpm -ivh http://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm

安装mysql

[root@localhost ~]# yum install -y mysql-server 
或 
[root@localhost ~]# yum install mysql-community-server

如果显示以下内容说明安装成功

Complete!

如果提示失败,比如下面的提示 “什么公钥尚未安装”，可执行

sudo yum install mysql-server --nogpgcheck

image.jpeg

设置mysql

设置开机启动Mysql

[root@localhost ~]# systemctl enable mysqld.service

检查是否已经安装了开机自启动

[root@localhost ~]# systemctl list-unit-files | grep mysqld

如果显示以下内容说明已经完成自动启动安装 mysqld.service enabled, 这里有的会显示俩个，无所谓啊！mysqld.service enabled开着的就行

设置开启服务

[root@localhost ~]# systemctl start mysqld.service

登录并修改mysql密码

查看mysql默认密码

[root@hecs-79640 local]# grep 'temporary password' /var/log/mysqld.log

2023-05-04T09:07:16.268453Z 6 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: Yk.QRmiq4K4j （Yk.QRmiq4K4j 就是初始密码）

第一次登录mysql，输入账号和默认密码

[root@hecs-79640 local]# mysql -u root -p
 // （-u 指的是user, -p 指的是password）

这里第一次登录输入默认密码

命令前面的路径是故意复制进来的，怕有的人搞错位置了

image.jpeg

修改当前默认密码
（改密码需要有大小写字母、数字、特殊字符组合）

mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '你的新密码';

image.jpeg

改了密码需要退出后使用新密码重新登录

exit // 退出

命令立即执行生效, 这个好像可以不用执行

mysql> flush privileges;

这时候使用navicat等数据库工具去远程连接，还是会报错，因为mysql 默认是本机连接，

image.jpeg

解决方案，登录MySQL，修改user表登录用户的host

mysql> use mysql;

更新主机，“%”=“*” 表示所有的主机都能访问呢

mysql> update user set host ='%' where user='root';

更改加密方式

mysql> ALTER USER 'root' @ '%'IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER;

更新你的密码

 mysql> ALTER USER 'root' @ '%' IDENTIFIED WITH mysql_native_password BY '你的mysql密码';

image.jpeg

注意英文别打错了，成功后，重新使用navicat 测试连接

image.jpeg

这里因为我们设置了所有的远程工具都可以去连接它，所以后期需要在安全组规则中把3306端口关闭掉！！！！！

连接上mysql后，自己可以把自己的库和表结构都导出导入一下

代码部署

首先把本地代码提交到git 仓库
依然通过终端窗口登录服务器

ssh root@123.***

然后我们去安装git

yum install git

安装成功后，我们在根目录下新建项目存放目录

// 进入根目录下
 [root@hecs-79640 /]# cd / 
// 新建项目存放目录
 [root@hecs-79640 /]# mkdir www 
//进入www
[root@hecs-79640 /]# cd www/ 
//新建存放目录，因为后期会有很多项目 
mkdir admin 
// 进入项目 cd admin/ 
// 然后通过git clone <url> 拉代码, 私有项目的话，每次clone、拉取会要求输入git账户、密码 
[root@hecs-79640 admin]# git clone https://gitee.com/******.git 
//并且安装一下扩展
 npm install
 //拉下来后，可以去执行一下 启动文件 
node main.js

⚠️这里注意一下，确认代码里面的服务器请求地址配置，以及远程数据库的表结构是否都已经导入进来，不然会提示找不到数据库啥的，

image.jpeg

这是启动成功的样子，我们知道我们启用了项目后，命令行就无法使用了，哪怎么办？接着看

image.jpeg

解决上面的问题，就要提到pm2,

Pm2安装及使用

pm2是一个进程管理工具,可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能。

全局安装pm2，因为后期可能会在不同的目录下去使用pm2

npm install -g pm2

创建全局环境变量

[root@hecs-79640 www]# ln -s /usr/local/node-v16.17.0-linux-x64/bin/pm2 /usr/local/bin/pm2

一些简单的命令

// 查看当前进程列表

[root@hecs-79640 www]# pm2 list

image.jpeg

第一次运行项目，后面可以使用ID去改变项目状态

pm2 start app.js

online 表示在线，正在运行中...

image.jpeg

我们也可以通过这个id去改变项目的开启和停止

pm2 start 0 //启动
pm2 stop 0 // 停止

凡是去更新过项目代码，则需要重启一下项目

image.jpeg

项目启动后，暂时就不管了！接下来，要访问项目还需要配置反向代理，别人才能域名访问你这个网站

nginx安装及配置

nginx安装

第一步：下载nginx压缩包

点我下载nginx->鼠标右击复制链接

image.jpeg

然后直接使用wget命令下载，指令如下所示（请根据自己的需求进行下载）：

// 注意：这里建议选择官网发布的稳定版本 
wget -c http://nginx.org/download/nginx-1.22.1.tar.gz

注意：这一步最好在自己的目标目录进行操作，我一般是把压缩包下载到/usr/local目录下。

第二步：配置nginx安装所需的环境

安装gcc

安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境。安装指令如下：

yum install gcc-c++

安装PCRE pcre-devel

Nginx的Rewrite模块和HTTP核心模块会使用到PCRE正则表达式语法。这里需要安装两个安装包pcre和pcre-devel。第一个安装包提供编译版本的库，而第二个提供开发阶段的头文件和编译项目的源代码。安装指令如下：

yum install -y pcre pcre-devel

3.安装zlib

zlib库提供了开发人员的压缩算法，在Nginx的各种模块中需要使用gzip压缩。安装指令如下:

yum install -y zlib zlib-devel

4.安装Open SSL

nginx不仅支持 http协议，还支持 https（即在 ssl 协议上传输 http），如果使用了 https，需要安装 OpenSSL 库。安装指令如下：

yum install -y openssl openssl-devel

第三步：解压nginx压缩包并安装

将压缩包进行解压，解压指令还是写一下吧：

tar -zxvf nginx-1.22.1.tar.gz

解压之后，进入加压文件，即

cd nginx-1.22.1.tar.gz。

然后进行配置，推荐使用默认配置，直接./configure就好了，如下图所示：

image.jpeg

额外说明：如果需要开始https支持，这里请不要直接执行./configure，即不要直接执行该脚本，而是在该脚本后面加上SSL模块，请执行如下命令替代 ./confingure :

./configure --with-http_ssl_module

至于 --with-http_ssl_module 的意思，顾名思义可知是添加https支持。

添加https支持也很简单，添加SSL证书并修改 nginx.conf 配置文件即可，后面有

编译安装nginx

这里和redis的编译安装比较类似，首先在当前目录（/usr/local/nginx-1.10.1）进行编译。输入make即可

make

然后回车，如果编译出错，请检查是否前面的4个安装都没有问题。

编译成功之后，就可以安装了，输入以下指令：

make install

ok，安装成功。

这时候返回上一级目录，就会发现多了nginx目录，接下来，启动nginx。

image.jpeg

第五步：启动nginx

进入/usr/local/nginx/sbin目录，输入./nginx即可启动nginx

./nginx

关闭nginx

./nginx -s quit 或者 ./nginx -s stop

重启nginx

./nginx -s reload

查看nginx进程

ps aux|grep nginx

设置nginx开机启动，只需在rc.local增加启动代码即可。

vim /etc/rc.local

然后在底部增加/usr/local/nginx/sbin/nginx

image.jpeg

此外，进入/usr/local/nginx/conf目录可修改nginx的配置文件 -> vim nginx.conf

譬如修改域名以及端口啥的，在server里面进行修改，下面我们就去看看吧

配置Nginx

我这里推荐直接使用远程工具链接服务器，然后进入到/usr/local/nginx/conf目录里面，

用开发编辑器打开nginx.conf，这样不会因为服务器卡死什么的，省得麻烦,下面是配置,最好是复制到编辑器去看⚠️

user nobody; worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; #gzip on; server { listen 80; //默认指向80端口 server_name localhost; //域名，也可以直接就写localhost location / { //这里放前端配置，因为需要打开域名就直接访问网站，而不是要加子目录 root /www/项目名称/dist; index index.html index.htm; #防止刷新404 try_files $uri $uri/ /index.html; #add_header Access-Control-Allow-Origin *; #add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } # 配置api location /service/ { proxy_pass http://127.0.0.1:8099/;端口是指你连接服务器的端口 proxy_connect_timeout 15s; proxy_send_timeout 15s; proxy_read_timeout 15s; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # server { listen 443 ssl; server_name localhost; #这是ssl证书，一定的是“以签发”的证书，下载到本地后。 #在服务器/usr/local/nginx/目录下新建cert目录，把下载好的 # 这里的目录啊是从根节点开始的，如果cert/server.crt;是找不到文件的，重启的时候会报错 ssl_certificate /usr/local/nginx/cert/server.crt; ssl_certificate_key /usr/local/nginx/cert/server.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; #加密套件。 ssl_prefer_server_ciphers on; location / { //这里放前端配置，因为需要打开域名就直接访问网站，而不是要加子目录 root /www/项目名称/dist; index index.html index.htm; #防止刷新404 try_files $uri $uri/ /index.html; #add_header Access-Control-Allow-Origin *; #add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } # 配置api location /service/ { proxy_pass http://127.0.0.1:8099/;端口是指你连接服务器的端口 proxy_connect_timeout 15s; proxy_send_timeout 15s; proxy_read_timeout 15s; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

升级https,

image.jpeg

下面是配置,最好是复制到编辑器去看⚠️

HTTPS server # server { listen 443 ssl; server_name localhost; #这是ssl证书，一定的是“以签发”的证书，下载到本地后。 #在服务器/usr/local/nginx/目录下新建cert目录，把下载好的俩个文件更名为server.crt和server.key ssl_certificate /usr/local/nginx/cert/server.crt; ssl_certificate_key /usr/local/nginx/cert/server.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; #加密套件。 ssl_prefer_server_ciphers on; location / { //这里放前端配置，因为需要打开域名就直接访问网站，而不是要加子目录 root /www/项目名称/dist; index index.html index.htm; #防止刷新404 try_files $uri $uri/ /index.html; #add_header Access-Control-Allow-Origin *; #add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } # 配置api location /service/ { proxy_pass http://127.0.0.1:8099/;端口是指你连接服务器的端口 proxy_connect_timeout 15s; proxy_send_timeout 15s; proxy_read_timeout 15s; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }

然后在工具上传，再到终端窗口里面去重启一下nnginx

进入/usr/local/nginx/sbin目录，输入./nginx -s reload即可启动nginx，但凡修改过nginx 配置都需要重新启动一下

./nginx -s reload

再回到浏览器中，通过访问“公网IP /service”就能直接访问部署的接口，访问“公网IP ”就是你的前端工程项目

后端部署到这里就结束了！文档太大了，有点卡。如果要开启gzip 后面有，继续看

Vue.js项目部署

目前我们服务器已经安装了node、npm、git等环境。我们继续部署前端工程项目

打开终端窗口登录服务器

//登录
 ssh root@123.***(公网IP) 
//输入密码后成功进入根目录下 
// 进入我们新建的工程目录下
 cd /www 
// 新建前端项目目录
 mkdir client 
// 进入client
 cd client 
// 拉取git仓库代码
 git clone <url> 
// 安装扩展 
npm install

因为我们可以从vite.config.js或者vue.config.js的outDir：‘dist’去配置打包生产的目录名称，

所以这里的目录名称要跟nginx里面的配置项名称一致，不然nginx找不到目录,就无法生效。

image.jpeg

这样我们的项目就部署好了

备注⚠️

但是有几个点需要记住一下，

以前都是在开发, mysql数据库都是连的本地的，就需要改成线上的，通过域名方式，云服务器都有了，肯定也要去买个不值钱的域名嘛！https://****.com/service/api*****，前端请求也改为线上域名。
就是前端接口请求成功了但是不会响应数据回来，响应里面是一个html，我自己的方式是注释vite.config.js（vue.config.js）里面的proxy，在Axios 里面设置baseUrl；肯定有其他方式，但是我这里为了快点解决就是这样做的。

image.jpeg

nginx 如果改了还是不生效的，记得重启，还有就是目录结构对不对
就这，有问题欢迎留言，再见再见！持续更新～～

更新帖

开启Gzip

如果要开启gzip ，只需做俩件事前端工程中开启gzip, 服务器配置中nginx开启gzip。
前端工程这边我用的是vite构建的项目，使用的是vite-plugin-compression

yarn add vite-plugin-compression -D
or
npm i vite-plugin-compression -D

// vite.config.js
import viteCompression from 'vite-plugin-compression';
export default () => {
  return {
    plugins: [
        // 启用zip包压缩
        viteCompression({
            algorithm: 'gzip', // 压缩算法，可选[‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’]
            threshold: 307200, // 大于300k启用zip包压缩,默认1025，单位是b, 不是kb
            verbose: false, //是否在控制台中输出压缩结果
            deleteOriginFile: true, // 压缩后是否删除源文件
        }),
    ],
  };
};

配置好后然后build 打包后diast目录里面就会生成文件***.gz 带gz格式文件

如果直接上传服务器是不能别解析，会提示找不到或者以下错误提示，所以nginx 也需要配置

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
进入nginx文件夹内 /usr/local/nginx/conf 找到nginx.conf使用编辑工具打开，下面是配置，根据注释来开启

    #开启压缩包
    gzip  on;
    #低于300k的资源不压缩 
    gzip_min_length 300k;
    #压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。 
    gzip_comp_level 4; 
    #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_disable "MSIE [1-6]\."; 
    #是否添加“Vary: Accept-Encoding”响应头
    gzip_vary on;
    #设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
    gzip_buffers 4 16k;
    #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_static on;
    #设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.1;

nginx.conf

这里要说一下gzip_static怎么配置的，其他的项只要复制上去就行了，但还是gzip_static 需要配置，如果已经配置过了，直接重启一下nginx 就行了, 如果不知道自己有没有配置，看下面

1.检测是否安装gzip_static，在***/nginx/sbin/目录下执行 ./nginx -V 如果没有--with-http_gzip_static_module，则就是没有配置

[root@localhost sbin]# ./nginx -V
nginx version: nginx/1.22.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) 
built with OpenSSL 1.0.2k-fips  26 Jan 2017
TLS SNI support enabled
configure arguments: --with-http_ssl_module

当前还有一个方法执行 ./nginx -t, 检测nginx配置是否正确,如果不正确会有下面提示

root@localhost sbin]# ./nginx -t
nginx: [emerg] unknown directive “gzip_static” in /usr/local/nginx/conf/nginx.conf:31

并使用 cd 命令切换到解压后的 Nginx 源代码目录。例如，如果源代码解压在 /usr/local/nginx-1.22.1 目录中，则运行：

cd /usr/local/nginx-1.22.1

请注意，根据您解压源代码的位置和版本号，上述路径可能会有所不同。

现在，再次尝试运行 ./configure，把你原来的 configure arguments 拷贝过来（上面./nginx -V里面有），然后增加 --with-http_gzip_static_module 即可，执行命令如下:

[root@localhost nginx-1.22.1]#  ./configure --with-http_ssl_module --with-http_gzip_static_module

请确保您在执行命令时使用的是标准的短横线（-）

运行 make 命令以编译 Nginx

make

运行 make install 命令以安装新编译的 Nginx

make install

然后去重启nginx就可以了；
执行./nginx -s reload，或者在重启的地方执行./nginx -V就可以看见已经加入了gzip_static

[root@localhost sbin]# ./nginx -V
nginx version: nginx/1.22.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) 
built with OpenSSL 1.0.2k-fips  26 Jan 2017
TLS SNI support enabled
configure arguments: --with-http_ssl_module --with-http_gzip_static_module

手把手教你Node.js部署+Vue.js部署

服务器介绍及初步设置

Node.js部署

1. 服务器连接及环境安装

安装Node

安装MySQL

设置mysql

登录并修改mysql密码

代码部署

Pm2安装及使用

nginx安装及配置

nginx安装

编译安装nginx

Vue.js项目部署

备注⚠️

开启Gzip

猜你喜欢

热点阅读