Linux + Nodejs + Express部署vue项目

注：服务器为CentOS 7.3.1611，使用Xshell6 + Xftp6工具完成服务器远程操作

一、安装Node环境

通过Xshell连接服务器成功之后就可以开始以下工作

1.清理工作

如果之前有安装过nodejs，用自带的包管理命名先删除一次

yum remove nodejs npm -y

2.去官网复制node安装包链接

https://nodejs.org/en/download/

 3.在Xshell里cd到安装目录

cd /usr/local/

4.输入命令链接开始下载nodejs安装包

wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

5.输入命令两步解压

xz -d node-v10.16.0-linux-x64.tar.xz
tar -xvf node-v10.16.0-linux-x64.tar

6.重名解压的文件夹名称为nodejs

mv node-v10.16.0-linux-x64 nodejs

7.进入解压目录

cd nodejs

8.创建软连接

ln -s  /usr/local/nodejs/bin/node /usr/local/bin/node
ln -s  /usr/local/nodejs/bin/npm /usr/local/bin/npm

 如果不小心输错了路径，重新创建会提示：‘ln: 无法创建符号链接"/usr/local/bin/npm": 文件已存在’，输入rm /usr/local/bin/npm命令清除后可以重新创建

9.测试

node -v
npm -v

安装成功有版本号

10.安装cnpm淘宝镜像并创建软链接

npm install -g cnpm
ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/cnpm

二、用Express搭建web服务

1.在Xshell里cd到指定目录

cd /var/www/

注：如果没有www目录就在var目录下输入命令mkdir www手动创建一个，并进入到www目录

2.创建web服务项目文件夹

mkdir demo

3.cd进入项目目录

cd demo

4.初始化项目生成package.json

npm init -y

注：这里的-y意思是省略创建过程中一直输yes的步骤

5.安装express

cnpm i express -D

6.创建web服务程序文件app.js

mkdir app.js

7.编写web服务程序代码app.js
 

const fs = require('fs'); //文件模块
const path = require('path'); //路径模块
const express = require('express'); //express框架模块
const app = express();
const hostName = '11.22.33.44'; //ip
const port = 9999; //端口

app.use(express.static(path.resolve(__dirname, './dist'))); // 设置静态项目访问路径(此处的dist为webpack打包生成的项目文件夹名称)

app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8'); // 设置所有访问服务请求默认返回index.html文件
    res.send(html);
});

app.listen(port, hostName, function() {
    console.log(`服务器运行在http://${hostName}:${port}`);
});

 

三、打包部署vue项目
1.在本地开发工具里打包需要部署的vue项目

npm run build

生成的dist文件夹就是我们需要部署到服务器上的项目

2.把dist文件夹通过Xftp工具复制到服务器的var/www/demo目录下

四、启动web服务
1.在Xshell里cd到var/www/demo目录，输入以下命令启动web服务程序

 

node app.js

如果能正常访问项目地址表示已经搭建成功。