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


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

    nginx安装包下载

    http://nginx.org/en/download.html
    在这里插入图片描述

    nginx安装

    首先先安装PCRE pcre-devel 和Zlib,因为配置nginx的时候会需要这两个东西
    PCRE(Perl Compatible Regular Expressions) 是一个Perl库,包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式,所以需要在 linux 上安装 pcre 库,pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令:

    yum install -y pcre pcre-devel
    

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

    yum install -y zlib zlib-devel
    

    虽然我安装的时候安装着两个儿就可以了,但是如果有需要,根据error提示可能还需要GCC和OpenSSL

    yum install gcc-c++
    
    yum install -y openssl openssl-devel
    

    好,现在我们开始安装nginx,1.14.0这个是目前最新版本

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

    解压并进入nginx目录

    tar -zxvf nginx-1.14.0.tar.gz
    
    cd nginx-1.14.0
    

    使用nginx的默认配置

    ./configure
    

    编译安装

    make
    
    make install
    

    查找安装路径:

    whereis nginx
    

    进入sbin目录,可以看到有一个可执行文件nginx,直接./执行就OK了。
    运行起来之后访问服务器ip,可以看到nginx的欢迎页面。
    如果访问不了,请在阿里云服务器实例管理的安全组设置一下。

    配置开机自启动。

    即在rc.local增加启动代码就可以了。

    vi /etc/rc.local
    

    增加一行

    /usr/local/nginx/sbin/nginx
    

    设置执行权限:

    chmod 755 rc.local
    

    按i进入编辑模式,按:wq保存退出

    这样就完成了

    重启服务

    /usr/local/nginx/sbin/nginx -s reopen
    

    查看服务

    ps -ef | grep nginx
    

    停止服务

    kill 7332
    

    查看配置

    vi /usr/local/nginx/conf/nginx.conf
    

    重新载入配置文件

    在修改了配置文件后需要重新载入配置文件。

    /usr/local/nginx/sbin/nginx -s reload
    

    打包 Vue 项目并上传至服务器

    在 npm run build 打包项目之前,需要修改一下 config 目录中的 index.js 文件,否则静态文件可能会加载失败。打开 config/index.js,定位到 build 对象下的 assetsPublicPath 位置,路径修改为“./”:

    build: {
        // ...
        assetsPublicPath: './',
    }
    

    然后执行 npm run build 打包项目。

    打包成功后,会在项目目录中多一个 dist 文件夹,里边有一个 static 目录(存放着静态文件)和 index.html ,这就是打包好的项目,然后把这个文件夹上传到服务器上就可以了。

    打开 Xftp,在本机上找到 dist 这个目录,传输到服务器上,我在服务器的 var 目录下新建了一个 www 目录,用来存放我的项目:
    在这里插入图片描述
    传输完成后,打开 XShell,修改一下 nginx 的配置文件,运行:

    vim /usr/local/nginx/conf/nginx.conf
    

    在 server 下的 location 中配置站点根目录:
    在这里插入图片描述
    修改了配置文件,需要重新载入配置文件,执行:

    /usr/local/nginx/sbin/nginx -s reload
    

    访问服务器 ip 地址,就可以看到自己的项目了。
    在这里插入图片描述

    常用操作

    配置 nginx 常用命令:
    查看配置:vi /usr/local/nginx/conf/nginx.conf
    编辑配置:vim /usr/local/nginx/conf/nginx.conf
    重启配置:/usr/local/nginx/sbin/nginx -s reload
    重启服务:/usr/local/nginx/sbin/nginx -s reopen

    可能遇到的问题

    问题一

    nginx 报异常"/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

    解决办法:

    /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
    

    还有一种可能就是nginx.conf的nginx.pid被注释了,将下图中pid前的#去掉,保存退出再次启动nginx
    在这里插入图片描述

    问题二

    访问图片链接报 403 Forbidden 错误。

    解决办法:
    查看Nginx日志,显示 failed (13: Permission denied), 没有权限。
    将nginx.config的user改为和启动用户一致。
    在这里插入图片描述

    vi /usr/local/nginx/conf/nginx.conf
    

    如果nginx没有web目录的操作权限,也会出现403错误。
    解决办法:
    给访问文件夹设置读写权限,重启Nginx即可。

    chmod -R 777 /baiduMap
    chmod -R 777 / baiduMap /map/
    
  • 相关阅读:
    使用VideoView开发视频总结
    后台接口向数据库录入汉字时乱码以及自动过滤文字经验总结
    8 Crash Reporting Tools For iOS And Android Apps
    Best Mobile Crash Reporting Software
    How do I obtain crash-data from my Android application?
    ACRA (Automated Crash Reporting for Android)
    Debugging Neural Networks with PyTorch and W&B
    OpenPose MobileNet V1
    Real-time-human-pose-estimation-by-pytorch
    openpose-pytorch
  • 原文地址:https://www.cnblogs.com/wjw1014/p/12149342.html
Copyright © 2020-2023  润新知