centos 系统中部署 nginx + vue

安装nginx

# 安装依赖：  yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel　

# 下载nginx： http://nginx.org/download/nginx-1.18.0.tar.gz

#解压并编码：
    tar -zxvf nginx-1.18.0.tar.gz
    ./configure
    make && make install

# 验证nginx：
　1、可以查找nginx 执行目录： find / -name nginx

　2、执行： /usr/sbin/nginx

　3. 直接浏览器访问： 127.0.0.1:80   

　PS:  注意： 1、虚拟机端口开放， 2、关闭防火墙，

开放端口操作：

Cebtos 开放指定端口命令

1、开启防火墙
systemctl start firewalld

2、开放指定端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
--add-port=portid[-portid]/protocol
命令含义：
--zone #作用域
--add-port=6666/tcp #添加端口，格式为：端口/通讯协议
--permanent #永久生效，没有此参数重启后失效

3、重启防火墙
firewall-cmd --reload

借鉴： 链接

 

安装node

这里特别注意： 开发版本的node 与线上的node 版本应该保持一致

# 下载  以14.13.1版本为例
https://registry.npmmirror.com/-/binary/node/v14.13.1/node-v14.13.1-linux-x64.tar.gz

# 解压
tar -xvf node-v14.13.1-linux-x64.tar.gz

# 这里可以更改文件夹名称
mv node-v14.13.1-linux-x64  nodejs

# 设置环境变量
vim /etc/profile
    export NODE_HOME=/usr/local/node   # /usr/local/nodejs 为所在路径
    export PATH=$NODE_HOME/bin:$PATH

# 保存并刷新
source /etc/profile


# 创建软连接
ln -s nodejs绝对路径下的node  /use/local/bin
ln -s nodejs绝对路径下的npm  /use/local/bin

# 验证
node -v
npm -v

vue项目build

# 进入web项目根目录, 打包
npm run build   # 会生成disk 文件夹

# 或者在本地打包完后上传disk到线上

 

配置nginx

注意： nginx 对于/root/* 目录是没有权限访问的， 项目一般都是放在 / 下面

server {
        listen       8889;  # 线上开放接口
        server_name  localhost;   # 线上机器IP

        location / {
            root   ~/web/dist;   # web 项目build disk 绝对路径
            index  index.html index.htm;
            # 这句很重要，解决location-href-=-‘-login‘-跳转404问题
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

启动

# 在nginx跟目录下：

# 指定启动文件 -c，  直接执行nginx 会使用default 配置文件
./sbin/nginx  -c  conf/nginx.conf

# 重启
./sbin/nginx  -s  reload

# 停止
./sbin/nginx  -s  stop

验证