Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >在ubuntu系统部署Nginx

在ubuntu系统部署Nginx

原创
作者头像
图难于其易
修改于 2023-11-17 00:02:27
修改于 2023-11-17 00:02:27
1.9K1
举报
文章被收录于专栏:读书笔记读书笔记

1 安装nginx

安装信息:

  • 登入终端:

主机:116.xxx.xxx.xx

端口:8123

用户名:root

密码:xxxxxx

  • 最终安装信息:

Nginx版本:1.19.8

Nginx存放目录:/usr/local/nginx

前端存放目录:/home/wyy/ai_html

SSL证书存放目录:/usr/local/nginx/sslkey

1.1 检查是否安装nginx

代码语言:shell
AI代码解释
复制
$ ps -ef | grep nginx
root     31450 31429  0 02:04 pts/2    00:00:00 grep --color=auto nginx  

检测到并未安装,下一步开始安装nginx。

1.2 安装nginx

1.1.1 安装依赖库

检查是否安装库命令,例如是否已安装zlib

代码语言:shell
AI代码解释
复制
$ dpkg -l | grep zlib

如果已经安装,可以跳过该依赖库的安装。

如果没有安装,则安装以下依赖库:

  • 安装gcc g++的依赖库
代码语言:shell
AI代码解释
复制
$ apt-get install build-essential
$ apt-get install libtool
  • 安装pcre依赖库
代码语言:shell
AI代码解释
复制
$ apt-get update
$ apt-get install libpcre3 libpcre3-dev
  • 安装zlib依赖库
代码语言:shell
AI代码解释
复制
$ apt-get install zlib1g-dev
  • 安装ssl依赖库
代码语言:shell
AI代码解释
复制
$ apt-get install openssl libssl-dev
1.1.2 安装nginx

下载安装包:

代码语言:shell
AI代码解释
复制
$ wget https://nginx.org/download/nginx-1.19.8.tar.gz

解压:

代码语言:shell
AI代码解释
复制
$ tar -zxvf nginx-1.19.8.tar.gz

解压后的文件夹重命名为nginx文件夹:

代码语言:shell
AI代码解释
复制
$ mv nginx-1.19.8 nginx

移动文件夹到ubuntu常见软件目录下:

代码语言:shell
AI代码解释
复制
$ mv nginx/ /usr/local/

进入目录:

代码语言:shell
AI代码解释
复制
$ cd /usr/local/nginx

配置命令:

代码语言:shell
AI代码解释
复制
$ ./configure --prefix=/usr/local/nginx --with-http\_gzip\_static\_module --with-http\_v2\_module --with-pcre --with-http\_ssl\_module --conf-path=/usr/local/nginx/conf/nginx.conf

编译:

代码语言:shell
AI代码解释
复制
$ make

安装:

代码语言:shell
AI代码解释
复制
$ make install

通过软连接,这样就可以直接使用 nginx 执行:

代码语言:shell
AI代码解释
复制
$ ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

测试是否安装成功:

代码语言:shell
AI代码解释
复制
$ nginx -V
nginx version: nginx/1.19.8
built by gcc 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04) 
built with OpenSSL 1.1.1  11 Sep 2018
TLS SNI support enabled
configure arguments: --prefix=/usr/local/nginx --with-http\_gzip\_static\_module --with-http\_v2\_module --with-pcre --with-http\_ssl\_module --conf-path=/usr/local/nginx/conf/nginx.conf

安装nginx成功!

2 启动nginx

检查配置信息是否正确:

代码语言:shell
AI代码解释
复制
$ nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

以上结果显示,配置信息正常。

P.S. 如果显示如下信息:

代码语言:shell
AI代码解释
复制
nginx: [alert] could not open error log file: open() "/usr/local/nginx/logs/error.log" failed (2: No such file or directory)
2016/09/13 19:08:56 [emerg] 6996#0: open() "/usr/local/nginx/logs/access.log" failed (2: No such file or directory)

是因为nginx/目录下没有logs文件夹,在/usr/local/nginx/目录执行如下命令可解决:

代码语言:shell
AI代码解释
复制
$ mkdir logs
$ chmod 700 logs

再次检测配置:

代码语言:shell
AI代码解释
复制
$ nginx -t

如果配置正常,则可以启动nginx:

代码语言:shell
AI代码解释
复制
$ nginx

访问端口确认是否成功启动nginx,在本项目中,访问 http://116.xxx.xxx.xx:80/:

Welcome to nginx!
Welcome to nginx!

出现如上结果,则已经成功启动nginx!

3 配置nginx

3.1.上传代码

通过FTP上传项目代码至规定的目录:/home/wyy,本项目中,前端代码存放在/home/wyy/ai_html/目录中。

3.2.配置nginx.conf

进入conf/目录:

代码语言:shell
AI代码解释
复制
$ cd /usr/local/nginx/conf

备份默认的nginx.conf为nginx.default.conf:

nginx.conf的内容如下:

代码语言:shell
AI代码解释
复制
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    # server {
    #     listen       80;
    #     server_name  localhost;

    #     #charset koi8-r;

    #     #access_log  logs/host.access.log  main;

    #     location / {
    #         root   html;
    #         index  index.html index.htm;
    #     }

    #     #error_page  404              /404.html;

    #     # redirect server error pages to the static page /50x.html
    #     #
    #     error_page   500 502 503 504  /50x.html;
    #     location = /50x.html {
    #         root   html;
    #     }
    # }
    include website/*.conf;
}

在当前目录新建website文件夹,然后添加ai.conf,配置本项目:

ai.conf的内容如下,端口为80:

代码语言:shell
AI代码解释
复制
server {
  listen 80;
  error_page  404 /index.html;
  client_max_body_size 100m;

  location / {
      root /home/wyy/ai_html; # 前端代码文件位置
      index index.html;
      try_files $uri $uri/ /index.html; # 解决vue刷新404的问题
  }
  location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    add_header 'Cache-Control' 'no-cache';

    if ($request_method = 'OPTIONS') {
        return 200;
    }
    proxy_pass http://127.0.0.1:9999/; # 反向代理
    # rewrite ^/b/(.*)$ /$1 break;
  }

  location /knowledgeApi/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    add_header 'Cache-Control' 'no-cache';

    if ($request_method = 'OPTIONS') {
        return 200;
    }
    proxy_pass http://127.0.0.1:8888/; # 反向代理
    # rewrite ^/b/(.*)$ /$1 break;
  }
}

3.3.启动项目

检查配置是否正常:

代码语言:shell
AI代码解释
复制
$ nginx -t

如果正常,则热重载nginx:

代码语言:shell
AI代码解释
复制
$ nginx -s reload

刷新http://116.xxx.xxx.xx:80/可以看到配置指定站点。

3.4.配置证书和https

/usr/local/nginx/目录下创建sslkey目录,存放SSl证书:

配置https,修改ai.conf(具体配置需要看云服务器要求):

代码语言:shell
AI代码解释
复制
server {
  listen                  443 ssl; # SSL 默认访问端口号为 443
  server_name             127.0.0.1; # 绑定证书的域名
  ssl_certificate         /usr/local/nginx/sslkey/smarthome_server.crt;
  ssl_certificate_key     /usr/local/nginx/sslkey/smarthome_server.key;
  error_page  404 /index.html;
    
  location / {
    # ...
  }
  location /api/ {
    # ...
  }
  location /knowledgeApi/ {
    # ...
  }
}

# HTTP请求自动跳转HTTPS
server {
  listen 80;
  error_page  404 /index.html;
  client_max_body_size 100m;
  return  301 https://$server_name$request_uri; # 把HTTP的域名请求转成HTTPS
}

3.5.启动项目

代码语言:shell
AI代码解释
复制
$ nginx -t
$ nginx -s reload

如果网页地址栏出现小锁标志,表示证书已经安装成功。

3.6.防火墙设置

代码语言:shell
AI代码解释
复制
$ sudo ufw allow 'Nginx HTTP' # 此配置文件仅打开端口80
$ sudo ufw allow 'Nginx HTTPS' # 此配置文件仅打开端口443

# 输入以下命令以启动防火墙
$ sudo ufw enable   # 开启
$ sudo ufw disable    # 关闭

# 输入以下命令以查看防火墙状态
$ sudo ufw status    # 查看
# inactive状态是防火墙关闭状态 active是开启状态

3.7 配置gzip

代码语言:shell
AI代码解释
复制
server{
    gzip on; # 开启gzip
    gzip_buffers 32 4K; # 设置用于处理请求压缩的缓冲区数量和大小,使用默认值即可
    gzip_comp_level 6; # 压缩等级【1-9】,等级越高压得越小,越消耗GPU计算资源
    gzip_min_length 1k; # 当文件大于等于1k时,开始压缩
    gzip_types application/javascript text/css text/xml; # 不应压缩图片、MP3、MP4类型:压缩率小,太费GPU资源
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
    gzip_vary on; # 增加响应头”Vary: Accept-Encoding”
    gzip_proxied any; # Nginx做反向代理时,无条件压缩所有结果数据
}

重启nginx后,查看网页文件的响应头信息:

Content-Encoding:gzip 说明开启了gzip压缩;

Transfet-Encoding:chunked 说明压缩后分块传输。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
WritableMap params = Arguments.createMap();这行就直接闪退了...... /system_process E/InputDispatcher: channel '4e8cbea0 com.bluestacks.appmart/com.bluestacks.appmart.MarketPageGrid (server)' ~ Channel is unrecoverably broken and will be disposed!
WritableMap params = Arguments.createMap();这行就直接闪退了...... /system_process E/InputDispatcher: channel '4e8cbea0 com.bluestacks.appmart/com.bluestacks.appmart.MarketPageGrid (server)' ~ Channel is unrecoverably broken and will be disposed!
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
React Native与Android 原生通信
我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式。
HelloJack
2018/08/28
2.6K0
React Native JSBundle拆包之原理篇
RN作为一款非常优秀的移动端跨平台开发框架,在近几年得到众多开发者的认可。纵观现在接入RN的大厂,如qq音乐、菜鸟、去哪儿,无疑不是将RN作为重点技术栈进行研发。
xiangzhihong
2022/11/30
3.4K0
Android与RN层的交互
Android跳转到RN页面 由于主客是以插件化的方式集成功能插件的,所以在主客中Android跳转到RN页面需要plugin、module和component。plugin、module不过多解释,component对应的是具体的js页面,要成功启动此页面,需要在对应的RN二方库中注册此页面。例如:
xiangzhihong
2022/11/30
6130
⏱ React Native 启动速度优化——Native 篇(内含源码分析)
Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?」
卤代烃
2021/04/26
2K0
⏱ React Native 启动速度优化——Native 篇(内含源码分析)
现有Android项目引入ReactNative--九步大法
为什么写这篇文章,因为很多时候我们是需要在原Android工程中添加ReactNative,而不是直接react-native init hello来创建工程,而且官网的说明不是很详细,不是完全针对安卓的,所以本文的必要性不言而喻。
先知先觉
2019/01/21
1.3K0
React Native Android原生模块开发实战|教程|心得
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看iOS篇的点这里《React Native iOS原生模块开发》)。 我平
CrazyCodeBoy
2018/05/07
2.2K0
React Native Android原生模块开发实战|教程|心得
RN集成到Android原生项目实践
1.新建普通Android项目 新建一个普通的Android项目即可,打开Android Studio -> File -> New -> New Project… 按步骤执行即可。
用户1269200
2018/12/06
2.9K0
使用Leancloud实现React Native App的消息推送(Push Notification)- Android篇
在上一篇文章 中我们详细讲解了用Leancloud实现iOS消息推送的流程,今天本文将继续讲解实现Android的消息推送。
MudOnTire
2019/05/26
3.4K0
React Native调用原生组件
在React Native开发过程中,有时候我们可能需要访问平台的API,但react Native还没有相应的实现,或者是React Native还不支持一些原生的属性,我们需要调用原生代码来实现,或者是我们需要复用一些原来的Java代码,这个时候我们就需要创建一个原生模块来自己实现对我们需要功能的封装。 相关文档可以参照官方的介绍。 #实例 下面我们就通过实现一个自定义模块,来熟悉编写原生模块需要用的一些知识。该模块主要实现调用一些Android原生的功能,比如弹Toast,启动Activity等。
xiangzhihong
2018/01/26
1.8K0
React Native调用Android相机图库
概述 在很多的React Native开发中,我们需要调用原生的api实现调用相机和图库的功能,网上用的最多的开源库如:react-native-image-picker。关于react-native-image-picker的用法大家请看相关的文档。我们今天手动实现一份。 调用Android图库相机 创建项目 执行命令 : react-native init HeadImage 创建一个名为HeadImage的工程,可以使用命令先运行下Demo项目。 然后照一张图片,放到放到工程的 HeadImage\A
xiangzhihong
2018/01/26
1.8K0
react-native 打开设置界面
iOS iOS打开设置还是比较简单的,使用Linking组件即可: Linking.openURL('app-settings:') .catch(err => console.log('error', err)) Android 1、在android/app/src/main/java/com/<projectname>/文件夹下创建opensettings文件夹 2、在这个文件夹下创建模块文件OpenSettingsModule.java(模块功能)和包文件OpenSettingsPackage.
mcq
2018/06/27
2K0
React Native 混合开发(Android篇)
在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。
CrazyCodeBoy
2018/09/26
4.4K0
React Native调用原生UI组件
在React Native 中,其已经将几个常用的原生组件进行了封装,但是并不是所有系统的原始组件都被封装了,因此有时候我们不得不自己动手封装一下,从而能够使用那些React Native没有为我们封装的原生组件。为了方便讲解,我们选择第一个第三方库kenburnsview来讲解,kenburnsview是一个可以让图片在在页面移动或者放大缩小的库。 Android原生组件封装 1,继承SimpleViewManager,返回UI组件实例 首先,需要继承 SimpleViewManager 这个泛型类,
xiangzhihong
2018/02/06
1.7K0
React Native移植原生Android
(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方的文档移植没有更新,最新版本集成方法已经发生很大变化啦~OK,今天我们用新版本进行走一遍流程,具体原来就不讲了,直接看移植步骤。 (二)前提准备工作 ①.首先我们有一个采用Gradle构建的Android应用项目,这个大家直接采用Android Studio进行创建一个项目即可。我这边新建一个目录TestInt
xiangzhihong
2018/02/05
1.8K0
React Native移植原生Android
ReactNative调用Android原生模块
有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。 我们把React Native设计为可以在其基础上编写真正的原生代码,并且可以访问平台所有的能力。要想实现访问Android原生API,总结一下,主要有以下几个步骤: 1. 创建一个原生模块 这个原生模块是一个继承ReactContextBaseJavaMod
xiangzhihong
2018/02/06
1.5K0
react-native学习之入门app
1、项目初始化: react-native init MyProject 2、启动项目: cd MyProject react-native start 新开cmd窗口: react-native r
用户1141560
2017/12/26
1.2K0
ReactNative For Android 框架启动核心路径剖析
QQ空间开发团队
2016/10/13
5.7K0
ReactNative For Android 框架启动核心路径剖析
React Native运行原理解析
Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架。本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建一套JS的运行框架。 一、 整体架构 RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP。 Facebook官方说法是learn once, run everywhere, 即在Android 、 IOS、 Browse
xiangzhihong
2018/02/05
6.3K0
React Native运行原理解析
react-native绑定优酷SDK-附效果图和源码
ReactNative绑定优酷SDK需要用到两部分知识: 优酷本身的sdk绑定; RN与原生界面的交互; 效果: RN版本:0.49.3 代码更新日期:2017.10.26 下文也根据绑定需要分为两部
磊哥
2018/05/08
9880
react-native绑定优酷SDK-附效果图和源码
React Native使用原生组件
概述 有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。 我们知道React Native本身对这种偏业务和底层调用是不关心的,这时候我们就想到了原生组件,我们通过调用原生组件,然后经过特定的封装来达到效果。如我们在原生开发中常见的Toast为例: 原生模块封装 假设我们希望可以从Javascript发起一个T
xiangzhihong
2018/02/05
2.4K0
推荐阅读
相关推荐
React Native与Android 原生通信
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档