Blog of Samperson

Nginx安装 + Vuejs部署

2018-02-28

1. CentOS 安装Nginx服务器

[1] 下载Nginx,解压后上传到服务器
安装prec:yum install pcre-devel
安装zlib:yum install zlib zlib-devel
安装openssl:yum install openssl openssl-devel
[2] 进入nginx目录,执行./configure
[3] 准备完毕,编译安装:make && make install
[4] 进入nginx安装的目录:cd /usr/local/nginx/sbin
运行nginx:./nginx
[5] 输入服务器ip地址,访问成功

2. Nginx服务器配置

配置在任何目录下启动

[1] 打开配置文件:vim /etc/profile
[2] 加入:

1
2
3
#nginx setting
export NGINX_HOME=/usr/local/nginx
export PATH=$NGINX_HOME/sbin:$PATH

[3] 执行source /etc/profile使配置文件生效。在任何目录直接输入nginx即可运行nginx。

nginx配置

[1] 打开配置文件:vi /root/nginx/conf/nginx.conf
[2] 常用参数说明:
listen 80; #侦听80端口
server_name #定义使用什么访问
root html; #定义服务器的默认网站根目录位置
location #默认请求
index index.php index.html index.htm; #定义首页索引文件的名称
error_page 500 502 503 504 /50x.html; # 定义错误提示页面

其他常用操作

[1] 查看80端口是否开启:fuser -n tcp 80
[2] 关闭nginx:./nginx -s stop(需要首先进入nginx安装的目录cd /usr/local/nginx/sbin

3. 部署Vuejs

因为Vuejs只是前端框架,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访问到其资源文件就可以了。
步骤如下:
[1] vue-cli搭建,可使用npm run build生成dist文件夹
[2] 将dist文件夹内容上传服务器

注意:[1] 不要上传文件夹;
[2] 上传到正确的位置。使用nginx服务器的话,默认在/usr/local/nginx/html文件夹,这里面的index.html就是在输入服务器ip地址时,访问得到的界面。

[3] 如上所述上传将dist文件夹内容上传到服务器的默认文件夹下是不会有问题的。但如果不是只有内容,而是有其他的目录文件,就会出现资源文件引用错误的情况(404)。需要通过修改nginx配置文件(vi /root/nginx/conf/nginx.conf)中的location或root来解决。

4. 参考资料

[1] http://blog.csdn.net/u013082989/article/details/50496291
[2] http://www.nginx.cn/76.html
[3] https://www.zhihu.com/question/46630687

Tags: vuejs