从零开始使用nginx系列(1)部署前端项目-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

从零开始使用nginx系列(1)部署前端项目

简介: 安装nginx 在nginx官网下载nginx,下载完毕后将压缩包放入云服务器中。 使用的云服务器环境为CentOS。 安装nginx相关依赖:gcc-c++、pcre-devel、zlib-devel、openssl、openssl-devel。

安装nginx

  1. nginx官网下载nginx,下载完毕后将压缩包放入云服务器中。
  2. 使用的云服务器环境为CentOS。
  3. 安装nginx相关依赖:gcc-c++、pcre-devel、zlib-devel、openssl、openssl-devel。
    image
  4. 解压nginx压缩包
    image
  5. 进入nginx的目录,执行configure文件。
    image
  6. 使用make命令,编译Nginx目录。
    image
  7. 使用make install命令进行安装。
    image
  8. 进入安装完毕后的nginx目录(/usr/local/nginx/)

image

  1. 进入sbin文件夹,执行nginx.exe命令,启动nginx服务器。

image

  1. 安装与运行nginx成功。访问服务器公网ip,查看结果。

image

部署

  1. 说明

    • nginx目录下的conf/nginx.conf文件是nginx的配置文件。
    • nginx目录下的sbin/nginx.exe可执行文件用于启动或重启nginx服务。
    • vim的常用命令:ESC-进入命令模式;a-进入编辑模式;:wq-保存并退出;:q-退出。
  2. 将nginx.exe配置为全局环境变量

    • 使用vim打开/etc/profile环境变量配置文件
      image
    • 添加内容
export NGINX\_HOME=/usr/local/nginx
export PATH=NGINX\_HOME/sbin

image

- 执行source /etc/profile 使配置文件生效

image

  1. 将要部署的打包好的前端项目放入/usr/local/nginx/目录中。

image

  1. 使用vim打开nginx配置文件开始进行配置

image

  1. nginx.conf内可以有多个server,每个server相当于开了一个端口,都可部署一个项目。

image

- listen——指定端口号
- server\_name——指定IP或域名
- location / ——指定端口号和IP地址所对应的项目目录

    - root——指定项目文件地址
    - index——指定项目的index页面。
  1. 重启nginx服务

image

  1. 部署成功。访问服务器公网ip,查看效果。

image

其他说明

  1. 对于前后端分离项目,常常需要设置请求转发,将前端的请求转发到实际的后端服务中。

image

  1. 对于部署Vue、React等单页应用项目,为防止页面刷新时出现404,需要设置:
    try_files uri/ /index.html;

image

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章