Ubuntu使用Nginx部署前端项目——记录

安装nginx

依次执行以下两条命令进行安装:

sudo apt-get update
sudo apt-get install nginx

通过查看版本号查看是否安装成功:

nginx -v

补充卸载操作:

sudo apt-get remove nginx nginx-common
sudo apt-get purge nginx nginx-common
sudo apt-get autoremove
sudo apt-get remove nginx-full nginx-common

补充Ubuntu的包管理器的用法:

sudo apt-get update:更新软件源
sudo apt-get upgrade:升级系统
sudo apt-get install package_name:安装软件包
sudo apt-get remove package_name:卸载软件包
sudo apt-get autoremove:自动清除无用依赖项
sudo apt-get purge package_name:卸载软件及其相关配置文件

nginx的配置文件

nginx的配置文件和静态资源文件分布位置:

/usr/sbin/nginx:主程序
/etc/nginx:存放配置文件(nginx.conf)
/usr/share/nginx:存放静态文件
/var/log/nginx:存放日志

本次实验将配置文件放到/etc/nginx/configs下:
为了操作方便我将切换到了超级用户:

sudo su
cd /etc/nginx
mkdir configs

最初的/etc/nginx目录下的文件状态如下:
在这里插入图片描述
创建文件夹configs用于存放nginx的配置文件:
在这里插入图片描述
配置文件相关注释:
在这里插入图片描述
以下是学习项目的一个配置:


#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  0;keepalive_timeout  65;#gzip  on;map $http_upgrade $connection_upgrade{default upgrade;'' close;}upstream webservers{server 127.0.0.1:8080 weight=90 ;#server 127.0.0.1:8088 weight=10 ;}server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   html/sky;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;}# 反向代理,处理管理端发送的请求location /api/ {proxy_pass   http://localhost:8080/admin/;#proxy_pass   http://webservers/admin/;}# 反向代理,处理用户端发送的请求location /user/ {proxy_pass   http://webservers/user/;}# WebSocketlocation /ws/ {proxy_pass   http://webservers/ws/;proxy_http_version 1.1;proxy_read_timeout 3600s;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "$connection_upgrade";}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#    listen       8000;#    listen       somename:8080;#    server_name  somename  alias  another.alias;#    location / {#        root   html;#        index  index.html index.htm;#    }#}# HTTPS server##server {#    listen       443 ssl;#    server_name  localhost;#    ssl_certificate      cert.pem;#    ssl_certificate_key  cert.key;#    ssl_session_cache    shared:SSL:1m;#    ssl_session_timeout  5m;#    ssl_ciphers  HIGH:!aNULL:!MD5;#    ssl_prefer_server_ciphers  on;#    location / {#        root   html;#        index  index.html index.htm;#    }#}}

创建并写入配置文件:

cd configs
touch test.conf
gedit test.conf

将我们添加的配置导入到nginx的配置中:

cd /etc/nginx
vim nginx.conf

添加:include /etc/nginx/configs/*.conf;
在这里插入图片描述

nginx相关命令

启动:

systemctl start nginx

停止:

systemctl stop nginx

重启:

systemctl reload nginx

查看nginx的启停状态:(如果正常启动,会看到绿色的Runing)

systemctl status nginx

如:
在这里插入图片描述
访问localhost(默认80端口)
在这里插入图片描述

部署前端项目

我第二天重启nginx的时候,发现它报错如work_process,events相关的错误,应该是configs下的test.conf与/etc/nginx/nginx.conf中的内容发生了冲突,所以我直接将test.conf的内容(见上面)复制在nginx.conf中,才重启成功。

路径相关配置:在配置文件中将以下路径改为你自己的打包好后的前端代码所在路径:

location / {root   /path/webcode;index  index.html index.htm;}

修改路径后,重启nginx。
按理说,这时我们访问localhost的时候就会访问前端代码的index文件。但是我的是403 Forbidden。
我修改了以下两个配置才能正常访问:
一、使nginx的启动用户和nginx的工作用户一致:
查看当前nginx的启动用户

ps aux|grep nginx

在这里插入图片描述
发现nginx的工作用户为nobody,所以再次修改配置文件中的启动文件:
在这里插入图片描述
再次查看:
在这里插入图片描述
二、修改用户对前端文件的访问权限:

chmod -R 755 /path/webcode

在这里插入图片描述
最后终于能正常访问了,暂时就踩了这些坑,完美撒花~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/184217.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件工程(十一)

逆向工程 定义 逆向工程 (reverse engineering):指在软件生存周期中,将软件的某种形式描述转换成更抽象形式的活动 重构 重构 (restructuring):指在同一抽象级别上转换系统的描述形式。如把C程序转换成Java程序 设计恢复 设…

[ffmpeg] aac 音频编码

aac 介绍 aac 简单说就是音频的一种压缩编码器,相同音质下压缩比 mp3好,目前比较常用。 aac 编码支持的格式 aac 支持的 sample_fmts: 8 aac 支持的 samplerates: 96000 88200 64000 48000 44100 32000 24000 22050 16000 12000 11025 8000 7350 通…

PC企业微信http协议逆向接口开发,发送大视频文件

产品说明 一、 hook版本:企业微信hook接口是指将企业微信的功能封装成dll,并提供简易的接口给程序调用。通过hook技术,可以在不修改企业微信客户端源代码的情况下,实现对企业微信客户端的功能进行扩展和定制化。企业微信hook接口…

js字符串分割方法

使用split()方法 这可能是最常见的字符串分割方法,它使用指定的分隔符将字符串拆分为子字符串,并返回一个数组。例如: const str Hello World; const arr str.split( );console.log(arr); // [Hello, World]使用substring()方法 此方法从…

Pycharm中使用matplotlib绘制动态图形

Pycharm中使用matplotlib绘制动态图形 最终效果 最近用pycharm学习D2L时发现官方在jupyter notebook交互式环境中能动态绘制图形,但是在pycharm脚本环境中只会在最终 plt.show() 后输出一张静态图像。于是有了下面这段自己折腾了一下午的代码,用来在pych…

unity学习笔记12

一、物理系统 如何让一个球体受到重力的影响? 只要给物体添加刚体组件(Rigidbody),就可以使其受到重力影响 1.刚体(Rigidbody): 刚体是一个组件,用于使游戏对象受到物理引擎的控制。…

Leetcode2336. 无限集中的最小数字

Every day a Leetcode 题目来源:2336. 无限集中的最小数字 解法1:集合 由于一开始类中包含所有正整数,并且操作要么添加任意的正整数,要么删除最小的正整数,因此我们可以期望,在任意时刻,存…

pta—说反话加强版

给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出。 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过500 000的字符串。字符串由若干单词和若干空格组成,其中单词是由英文字母(大小…

高速PCB设计中的射频分析与处理方法

射频(Radio Frequency,RF)电路在现代电子领域中扮演着至关重要的角色,涵盖了广泛的应用,从通信系统到雷达和射频识别(RFID)等。在高速PCB设计中,射频电路的分析和处理是一项具有挑战…

4152A/E/F 调制域分析仪(0.125Hz~4GHz/26.5GHz/40GHz)

4152A/E/F 调制域分析仪 频率范围覆盖:0.125Hz~40GHz 能够精确表征信号频率随时间动态变化规律 01 产品综述 4152系列调制域分析仪能够精确表征信号频率随时间动态变化规律,最大监测带宽36GHz,最短每隔100ns无隙监测&#xff…

C++学习寄录(九.多态)

1.多态基本概念 先来看这样的代码,我的本意是想要输出“小猫在说话”,但实际输出的却是“动物在说话”。这是因为地址早绑定,在代码编译阶段就已经确定了函数地址;如果想要实现既定目标,那么这个dospeak(&…

练 习

写出sql语句,查询所有年龄大于20岁的员工2select * from employee where age>20;3写出sql语句,查询所有年龄大于等于22小于25的女性员工4select * from employee where age between 22 and 25 and sex女;5写出sql语句,统计男女员工各有多少…

html/css中用float实现的盒子案例

运行效果&#xff1a; 代码部分&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <style type"text/css">.father{width:300px; height:400px; background:gray;…

C#WPF使用MaterialDesign 显示带遮罩的对话框

第一步定义对话框 <UserControlx:Class="TemplateDemo.Views.Edit.UCEditUser"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.m…

svn合并冲突时每个选项的含义

合并冲突时每个选项的含义 - 这个图片是 TortoiseSVN&#xff08;一个Subversion&#xff08;SVN&#xff09;客户端&#xff09;的合并冲突解决对话框。当你尝试合并两个版本的文件并且出现差异时&#xff0c;你需要解决这些差异。这个对话框提供了几个选项来处理合并冲突&…

如何打造更高效、安全、灵活的企业网络组网方案

随着互联网的快速发展&#xff0c;企业对于网络的需求也变得越来越高。然而&#xff0c;企业规模不断扩大&#xff0c;分布式办公越来越普遍&#xff0c;如何保证数据安全传输和网络稳定运行是每一家企业都需要面对的问题。因此&#xff0c;合理构建企业组网架构已经成为了现代…

22.Oracle中的临时表空间

Oracle中的临时表空间 一、临时表空间概述1、什么是临时表空间2、临时表空间的作用 二、临时表空间相关语法三、具体使用案例1、具体使用场景示例2、具体使用场景代码示例 点击此处跳转下一节&#xff1a;23.Oracle11g的UNDO表空间点击此处跳转上一节&#xff1a;21.Oracle的程…

LeetCode(39)赎金信【哈希表】【简单】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 赎金信 1.题目 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字…

Mysql DDL语句建表及空字符串查询出0问题

DDL语句建表 语法&#xff1a; create table 指定要建立库的库名.新建表名 &#xff08;... 新建表的字段以及类型等 ...&#xff09;comment 表的作用注释 charset 表编译格式 row_format DYNAMIC create table dev_dxtiot.sys_url_permission (id integer …

debianubuntu的nvidia驱动升级

背景 给出的机器的驱动版本不符合要求&#xff0c;使用自定义的驱动版本。 前置 如果使用nvidia官方的.run安装的驱动包&#xff0c;可以使用系统自带的nvidia-uninstall命令卸载比较方便&#xff0c;不建议使用apt pruge nvidia-*命令删除。会带来其他的问题。 卸载完成之…