1、安装CentOS

  这里不再复述,不会的请移步VMware虚拟机安装centos7

 

2、部署

1、安装 node.js

  解压源码

cd /usr/local/
tar -xvf node-v10.14.0-linux-x64.tar.xz

  重命名:

  建立软连接:

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

  查看node版本

node -v
npm -v

2、将项目dist文件拷贝到指定目录

3、安装Nginx

安装所需环境

Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境。

1. gcc 安装
安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装:

yum install gcc-c++

2. PCRE pcre-devel 安装
PCRE(Perl Compatible Regular Expressions) 是一个Perl库,包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式,所以需要在 linux 上安装 pcre 库,pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令:

yum install -y pcre pcre-devel

3. zlib 安装
zlib 库提供了很多种压缩和解压缩的方式, nginx 使用 zlib 对 http 包的内容进行 gzip ,所以需要在 Centos 上安装 zlib 库。

yum install -y zlib zlib-devel

4. OpenSSL 安装
OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议,并提供丰富的应用程序供测试或其它目的使用。
nginx 不仅支持 http 协议,还支持 https(即在ssl协议上传输http),所以需要在 Centos 安装 OpenSSL 库。

yum install -y openssl openssl-devel

5.下载

使用wget命令下载

wget -c https://nginx.org/download/nginx-1.10.1.tar.gz

6.解压

依然是直接命令:

tar -zxvf nginx-1.10.1.tar.gz
cd nginx-1.10.1

7.配置

其实在 nginx-1.10.1 版本中你就不需要去配置相关东西,默认就可以了。当然,如果你要自己配置目录也是可以的。
1.使用默认配置

./configure

2.自定义配置(不推荐)

./configure \
--prefix=/usr/local/nginx \
--conf-path=/usr/local/nginx/conf/nginx.conf \
--pid-path=/usr/local/nginx/conf/nginx.pid \
--lock-path=/var/lock/nginx.lock \
--error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/access.log \
--with-http_gzip_static_module \
--http-client-body-temp-path=/var/temp/nginx/client \
--http-proxy-temp-path=/var/temp/nginx/proxy \
--http-fastcgi-temp-path=/var/temp/nginx/fastcgi \
--http-uwsgi-temp-path=/var/temp/nginx/uwsgi \
--http-scgi-temp-path=/var/temp/nginx/scgi

注:将临时文件目录指定为/var/temp/nginx,需要在/var下创建temp及nginx目录

8.编译安装

make
make install

查找安装路径:

whereis nginx

 

9. 配置nginx

cd /usr/local/nginx/conf

vim nginx.conf

server里面更改:

server {
listen ;
server_name localhost; //其实最好改成你的ip 不要写域名 localhost在这台server上相当于是10.xxx xxx的意思 #charset koi8-r; #access_log logs/host.access.log main; location / {
root /root/data; //把dist.zip解压到data文件夹下
index index.html index.htm;
}

nginx修改后需要更新配置

/usr/local/nginx/sbin

./nginx -s reload   //重新载入配置文件

./nginx   //启动

./nginx -s quit:此方式停止步骤是待nginx进程处理任务完毕进行停止。
./nginx -s stop:此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。

PS:主机能ping同虚拟机ip,但是加上端口号无法访问,需要开启端口号

查看开启了哪些端口

firewall-cmd --list-ports

查看端口

firewall-cmd --zone=public --query-port=80/tcp

添加

firewall-cmd --zone=public --add-port=5005/tcp --permanent   (--permanent永久生效,没有此参数重启后失效)

添加端口外部访问权限(这样外部才能访问)
firewall-cmd --add-port=5005/tcp

重新载入,添加端口后重新载入才能起作用

firewall-cmd --reload

这些之后,端口是开启成功的,如果没有成功,重启系统试试。

最后项目中用到了跨域,之前在webpack中配置的在服务器中不起作用,用Nginx代理

1、

location /proxy/ {
  rewrite ^/proxy/ / break;
  proxy_pass http://m.kugou.com;
}

2、

location /proxy/ {
  proxy_pass http://m.kugou.com/$1?$query_string;
}

VMware+node+nginx+vue的更多相关文章

  1. 使用Node,Vue和ElasticSearch构建实时搜索引擎

    (译者注:相关阅读:node.js,vue.js,Elasticsearch) 介绍 Elasticsearch是一个分布式的RESTful搜索和分析引擎,能够解决越来越多的用例. Elasticse ...

  2. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  3. Linux下Jenkins与GitHub自动构建Node项目(Vue)

    根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...

  4. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  5. node + nginx + mongo搭建负载均衡

    基于node和nignx和mongo搭建负载均衡 nginx配置: upstream back {                                                  # ...

  6. Node.js/Vue环境搭配安装

    http://blog.sina.com.cn/s/blog_497ff1a70102x0sw.html 第一次接触Node.js,想创建自己的服务就须配置好Node.js环境 安装Node.js 下 ...

  7. 用node+webpack+vue新建vue项目步骤

    1. 安装node,命令行输入node-v命令查看是否安装成功. 2. 安装vue:npm install vue-cli -g(全局安装). 3. 在想要创建vue项目的目录下,按住shift+右键 ...

  8. node,npm,vue的全局升级

    pc环境:windows 10, OS:win32, Arch:x64 1.升级node.js到最新 ⑴.别人成功的方法: . 第一步 npm -g install n //此处可以加上 --forc ...

  9. Vue笔记:使用node开发vue入门实例

    安装NPM 首先在命令终端输入 npm -v 检测是否安装 npm.如果没有,按照下面教程进行安装. 下载地址: nodejs中文网 到官网下载自己系统对应的版本,这里我们下载Windows系统的64 ...

随机推荐

  1. Docker入门-笔记-1

    Docker入门 Docker 是 Golang 编写的, 自 2013 年推出以来,受到越来越多的开发者的关注.如果你关注最新的技术发展,那么你一定听说过 Docker.不管是云服务还是微服务(Mi ...

  2. JS获取包含当前节点本身的代码内容(outerHtml)

    原生JS DOM的内置属性 outerHTML 可用来获取当前节点的html代码(包含当前节点),且此属性可使用jQuery的prop()获取 <div id="demo-test-0 ...

  3. HTML连载56-网易注册界面实战之全部代码

    一.今天完成了网易邮箱注册界面的全部编写,编写一个小小的网页就需要这么多时间来进行设计.测量.排版.编写.测试,才能进行使用,同时编写这个网页复习了几乎前面的所有内容,最后来一个汇总就可以了. < ...

  4. git到GitHub的操作和遇到的一些问题

    一.新建完项目后执行git git status //查看状态,任何时候都可以用 1. git init //初始化文件夹,并创建.git本地仓库(.git默认隐藏) 2. git add . //把 ...

  5. Java面试题_第一阶段(static、final、面向对象、多线程、集合、String、同步、接口、GC、JVM)

    1.1 简述static和final的用法? static:修饰属性,方法,代码块 (1)静态属性:也可叫类变量  类名.属性名  来访问 (共有的类变量与对象无关,只和类有关) 注意:类中的实例变量 ...

  6. 基于V6的中移动物联测试例子,当前测试还挺稳定

    下载: 链接:https://pan.baidu.com/s/1Gz8mEffDGXNSK8lIsAIUEg   提取码:2sur 测试步骤看此贴,跟V7开发板是一样的: 基于H7的中移动物联例子以及 ...

  7. GetWindowLong() 函数

    Window API函数,可根据nlndex参数的不同获取指定窗口的相关信息,也可用于获取窗口内存中指定偏移的32位度整型值.该值大小在注册窗口类时设定, 函数原型:Long GetWindowLon ...

  8. Docker 私服Registry简介与使用Docker-Compose安装Registry

    场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  9. VUE组件 之 高德地图地址选择

    注:本文基于上一篇文章[ Vue-Cli 3.0 中配置高德地图] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2 ...

  10. [Go]TCP服务中增加消息队列与工作池

    之前的处理中每一个连接都会创建一个主groutine , 每个连接中的主groutine中创建出读groutine 和写groutine 每个连接处理业务再单独开出一个groutine ,这样如果有1 ...