vue+nodejs项目部署上线阿里云服务器centOS

最新推荐文章于 2023-02-09 10:29:11 发布

SpringForAll社区分区

最新推荐文章于 2023-02-09 10:29:11 发布

阅读量421

点赞数

文章标签： node.js vue.js centos nginx

原文链接：https://juejin.im/post/5b1e708ef265da6dff7dc8e5

版权

第一次部署项目上线，也查了很多资料，亲测可用，记录一下

服务器配置

阿里云 CentOS 7.2 64位

配置服务器环境

用xshell连接服务器，下载安装xshell，新建会话

在这里插入图片描述

安装node.js

更新yum

yum -y update
yum -y groupinstall "Development Tools"

进入/usr/src文件，这个文件夹用来存放软件源代码

cd /usr/src

从Node.js的站点中获取压缩档源代码，可以选择版本

wget http://nodejs.org/dist/v6.9.5/node-v6.9.5.tar.gz

解压缩并进入压缩后的文件夹中

tar zxf node-v6.9.5.tar.gz 
cd node-v6.9.5

执行配置脚本进行编译预处理

./configure

开始编译源代码

make
make install

使用Node.js的模块管理器npm安装Express middleware
和forever（一个用来确保应用程序启动并且在需要时重启的非常有用的模块)

npm -g install express forever

建立超级链接, 不然 sudo node 时会报 “command not found”

sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/node /usr/lib/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm
sudo ln -s /usr/local/bin/node-waf /usr/bin/node-waf
sudo ln -s /usr/local/bin/forever /usr/bin/forever

安装mongodb

进入文件夹/usr/local,下载mongodb源代码

cd /usr/local
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz

解压安装包，重命名文件夹为mongodb

tar zxvf mongodb-linux-x86_64-2.4.9.tgz 
mv mongodb-linux-x86_64-2.4.9 mongodb

在var文件夹里建立mongodb文件夹，并分别建立文件夹data用于存放数据，logs用于存放日志

mkdir /var/mongodb
mkdir /var/mongodb/data
mkdir /var/mongodb/logs

打开rc.local文件，添加CentOS开机启动项：

vim /etc/rc.d/rc.local
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

启动mongodb

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

看到如下信息说明已经安装完成并成功启动:

forked process: 18394
all output going to: /var/mongodb/logs/log.log

上传文件

npm run build

命令运行结束后，会发现目录下多了dist文件夹，这个就是要上传至服务器的

文件传输
用的是xftp，下载安装，启动xftp，新建会话

在这里插入图片描述

创建目录文件 /root/projec/myblog (目录层级、名称随意，这里我以次为项目目录)

将刚刚的 dist 文件夹复制到 /root/project/myblog 目录下，前端资源就OK了
将 server 文件夹也复制到 /root/project/myblog 目录下

初始化项目

xshell连接服务器

[root@iZyu3s9k5ltqwmZ ~]# cd /root/project/myblog
[root@iZyu3s9k5ltqwmZ myblog]# ls
dist server

初始化创建 package.json，可以在本地创建编辑好后上传到服务器目录

[root@iZyu3s9k5ltqwmZ myblog]# npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
 
See `npm help json` for definitive documentation on these fields
and exactly what they do.
 
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
 
Press ^C at any time to quit.
package name: (myblog) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /root/project/myblog/package.json:
 
{
  "name": "myblog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
 
 
Is this ok? (yes) yes
 
// 全部回车即可
[root@iZyu3s9k5ltqwmZ myblog]# ls
dist  package.json  server
 
// 打开 package.json 编辑（也可在 Xftp 中右键文件编辑）
[root@iZyu3s9k5ltqwmZ myblog]# vim package.json
 
    {
        "name": "my-blog",
        "version": "1.0.0",
        "description": "A Vue.js project",
        "author": "",
        "private": true,
        "scripts": {
            "dev": "node build/dev-server.js",
            "start": "node build/dev-server.js",
            "build": "node build/build.js"
        },
        "dependencies": {
            "body-parser": "^1.17.2",
            "cookie-parser": "^1.4.3",
            "express": "^4.16.2",
            "express-session": "^1.15.5",
            "formidable": "^1.1.1",
            "highlight.js": "^9.12.0",
            "marked": "^0.3.6",
            "mysql": "^2.14.0",
            "node-sass": "^4.5.3",
            "node-uuid": "^1.4.8"
        },
        "engines": {
            "node": ">= 4.0.0",
            "npm": ">= 3.0.0"
        },
        "browserslist": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
        ]
    }

保存退出，运行

[root@iZyu3s9k5ltqwmZ myblog]# npm install

修改资源路径

进入文件夹 server，打开app.js，设置静态资源路径，并修改监听端口为80（HTTP端口），api.js 中文件路径相关的也要更改

[root@iZyu3s9k5ltqwmZ server]# vim index.js

// 部署上线时读取静态文件
app.use(express.static(path.join(__dirname, '../dist')));

// 监听端口
app.listen(80);
console.log('success listen at port:80......');

开放80端口

登陆阿里云，进入控制管理台 -> 云服务器 ECS -> 安全组 -> 配置规则 -> 快速创建规则
启动服务

[root@iZyu3s9k5ltqwmZ server]# node index.js
success listen at port:80......

安装pm2

pm2 是一个带有负载均衡功能的Node应用的进程管理器.

以 node index.js 启动了项目，当我们退出 Xshell 时，进程就会关闭，无法在访问到项目，而 pm2 就是解决这种问题的，以 pm2 启动项目后，退出 Xshell 后依然可以正常访问

// 安装 pm2
[root@iZyu3s9k5ltqwmZ /]# npm install -g pm2

// 以 -g 全局安装的插件都在 node 安装目录 bin 文件下，
[root@iZyu3s9k5ltqwmZ bin]# ls
cnpm  node  npm  npx  pm2  pm2-dev  pm2-docker  pm2-runtime

bin 下都是命令语句，为了可以在任何目录都可以使用命令，我们将此文件夹加入环境变量

查看环境变量

 [root@izwz9e9bjg74ljcpzr7stvz ~]# echo $PATH

永久添加环境变量（影响所有用户）

[root@iZyu3s9k5ltqwmZ ~]# vim /etc/profile
// 在文档最后，添加:
# node
export NODE_HOME=/root/node-v8.9.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin

保存，退出，然后运行

[root@iZyu3s9k5ltqwmZ ~]# source /etc/profile

pm2 启动项目

[root@iZyu3s9k5ltqwmZ ~]# cd /root/project/myblog/server
// 启动进程
[root@iZyu3s9k5ltqwmZ server]# pm2 start index.js
// 停止进程
[root@iZyu3s9k5ltqwmZ server]# pm2 stop index.js
// 查看进程
[root@iZyu3s9k5ltqwmZ server]# pm2 list

刷新页面404

因为vue是单页客户端应用，如果后台没正确配置，用户在浏览器刷新就会404
我采取的是express的方法，其他可以参考HTML5history模式

先npm 下载connect

npm install --save connect-history-api-fallback

在server文件夹的app.js中添加

var history = require('connect-history-api-fallback');
var express = require('express');

var app = express();
app.use(history());

nginx服务器

上面我们是直接以 node 启动一个服务器，监听 80 端口，这样我们就可以直接以 IP 地址或域名的方式访问，也可以监听其他端口如3000，这样我们就得在地址后加上 : 端口号，显然这样很麻烦，且一般 node 程序基本不监听 80 端口，还可能同时运行几个 node 项目，监听不同的端口，通过二级域名来分别访问。这里就用到 Nginx 来实现反向代理。

Nginx安装

进入任意目录下载以上压缩包(版本号改为最新即可)：

[root@iZyu3s9k5ltqwmZ download]# wget http://www.zlib.net/zlib-1.2.11.tar.gz
[root@iZyu3s9k5ltqwmZ download]# wget https://ftp.pcre.org/pub/pcre/pcre-8.41.tar.gz
[root@iZyu3s9k5ltqwmZ download]# wget https://www.openssl.org/source/openssl-fips-2.0.16.tar.gz
[root@iZyu3s9k5ltqwmZ download]# wget http://nginx.org/download/nginx-1.13.7.tar.gz
[root@iZyu3s9k5ltqwmZ download]# ls
pcre-8.41.tar.gz   zlib-1.2.11.tar.gz
nginx-1.13.7.tar.gz  openssl-fips-2.0.16.tar.gz

解压压缩包：

[root@iZyu3s9k5ltqwmZ download]# tar zxvf zlib-1.2.11.tar.gz
[root@iZyu3s9k5ltqwmZ download]# tar zxvf pcre-8.41.tar.gz
[root@iZyu3s9k5ltqwmZ download]# tar zxvf openssl-fips-2.0.16.tar.gz
[root@iZyu3s9k5ltqwmZ download]# tar zxvf nginx-1.13.7.tar.gz

// 看清各个目录下的是 configure 还是 config
[root@iZyu3s9k5ltqwmZ zlib-1.2.11]# ./configure && make && make install
[root@iZyu3s9k5ltqwmZ pcre-8.41]# ./configure && make && make install
[root@iZyu3s9k5ltqwmZ openssl-fips-2.0.16]# ./config && make && make install
[root@iZyu3s9k5ltqwmZ nginx-1.13.7]# ./configure --with-pcre=../pcre-8.41/ --with-zlib=../zlib-1.2.11/ --with-openssl=../openssl-fips-2.0.16/
[root@iZyu3s9k5ltqwmZ nginx-1.13.7]# make && make install

安装 C++ 编译环境

yum install gcc-c++

运行Nginx

安装好的Nginx路径在 /usr/local/nginx

[root@iZyu3s9k5ltqwmZ ~]# cd /usr/local/nginx
[root@iZyu3s9k5ltqwmZ nginx]# ls
client_body_temp  conf  fastcgi_temp  html  logs  nginx.conf  proxy_temp  sbin  scgi_temp  uwsgi_temp

配置文件路径：
/usr/local/nginx/conf/nginx.conf

运行Nginx：

[root@iZyu3s9k5ltqwmZ ~]# cd /usr/local/nginx/sbin
[root@iZyu3s9k5ltqwmZ sbin]# ./nginx
// 查看是否运行成功
[root@iZyu3s9k5ltqwmZ sbin]# netstat -ntlp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      3525/nginx: master

使用server命令启动nginx服务

现在nginx启动、关闭比较麻烦，关闭要找到PID号，然后杀死进程，启动要进入到 /usr/local/nginx/sbin 目录下使用命令，为此我们通过设置System V脚本来使用server命令启动、关闭、重启nginx服务。

在 /etc/init.d 目录下创建nginx启动脚本文件

[root@iZyu3s9k5ltqwmZ ~]# cd /etc/init.d
[root@iZyu3s9k5ltqwmZ init.d]# vim nginx

将以下代码复制粘贴进去，然后保存。

#! /bin/sh
# chkconfig: 2345 55 25
# Description: Startup script for nginx webserver on Debian. Place in /etc/init.d and
# run 'update-rc.d -f nginx defaults', or use the appropriate command on your
# distro. For CentOS/Redhat run: 'chkconfig --add nginx'
 
### BEGIN INIT INFO
# Provides:          nginx
# Required-Start:    $all
# Required-Stop:     $all
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: starts the nginx web server
# Description:       starts nginx using start-stop-daemon
### END INIT INFO
 
# Author:   licess
# website:  http://lnmp.org
 
PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
NAME=nginx
NGINX_BIN=/usr/local/nginx/sbin/$NAME
CONFIGFILE=/usr/local/nginx/conf/$NAME.conf
PIDFILE=/usr/local/nginx/logs/$NAME.pid
 
case "$1" in
    start)
        echo -n "Starting $NAME... "
 
        if netstat -tnpl | grep -q nginx;then
            echo "$NAME (pid `pidof $NAME`) already running."
            exit 1
        fi
 
        $NGINX_BIN -c $CONFIGFILE
 
        if [ "$?" != 0 ] ; then
            echo " failed"
            exit 1
        else
            echo " done"
        fi
        ;;
 
    stop)
        echo -n "Stoping $NAME... "
 
        if ! netstat -tnpl | grep -q nginx; then
            echo "$NAME is not running."
            exit 1
        fi
 
        $NGINX_BIN -s stop
 
        if [ "$?" != 0 ] ; then
            echo " failed. Use force-quit"
            exit 1
        else
            echo " done"
        fi
        ;;
 
    status)
        if netstat -tnpl | grep -q nginx; then
            PID=`pidof nginx`
            echo "$NAME (pid $PID) is running..."
        else
            echo "$NAME is stopped"
            exit 0
        fi
        ;;
 
    force-quit)
        echo -n "Terminating $NAME... "
 
        if ! netstat -tnpl | grep -q nginx; then
            echo "$NAME is not running."
            exit 1
        fi
 
        kill `pidof $NAME`
 
        if [ "$?" != 0 ] ; then
            echo " failed"
            exit 1
        else
            echo " done"
        fi
        ;;
 
    restart)
        $0 stop
        sleep 1
        $0 start
        ;;
 
    reload)
        echo -n "Reload service $NAME... "
 
        if netstat -tnpl | grep -q nginx; then
            $NGINX_BIN -s reload
            echo " done"
        else
            echo "$NAME is not running, can't reload."
            exit 1
        fi
        ;;
 
    configtest)
        echo -n "Test $NAME configure files... "
 
        $NGINX_BIN -t
        ;;
 
    *)
        echo "Usage: $0 {start|stop|force-quit|restart|reload|status|configtest}"
        exit 1
        ;;
 
esac

修改脚本权限

chmod a+x /etc/init.d/nginx

注册成服务

chkconfig --add nginx

设置开机启动

chkconfig nginx on

这样就可以在任意目录通过service启动、关闭nginx

[root@iZyu3s9k5ltqwmZ ~]# service nginx start
[root@iZyu3s9k5ltqwmZ ~]# service nginx stop
[root@iZyu3s9k5ltqwmZ ~]# service nginx restart