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

news2024/10/7 17:27:39

安装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/;
        }
		
		# WebSocket
		location /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.coloradmin.cn/o/1270636.html

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

相关文章

为计算机设计一个完美的思维模型,帮找bug和漏洞,一起来做渗透测试吧 最赚钱的10种思维模型

芒格 如果我不能淘汰自己一年前的思维模型,这一年我就白过了。(终身学习,不断迭代自己。) 思维模型是什么,有哪些? 思维模型是用来简化和理解复杂现实世界的概念框架。它们是一种思考和解决问题的工具&a…

8个最流行的Revit插件【2023-2024】

NSDT工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 Revit 已取代 AutoCAD 成为全球行业标准软件。 随着设计复杂性的增加,近年来插件变得更加必要。 热…

【腾讯地图】【微信小程序】地图选点

【相关文章】 【腾讯地图】【微信小程序】地图选点 【腾讯地图】【微信小程序】路线规划 【腾讯地图】【微信小程序】城市记录(基于地图选点入门版) 【效果展示】 【官方文档】 微信小程序插件-地图选点插件 【完善流程】 当前操作和官方文档操作有部…

06 # 枚举类型

一个角色判断例子 function initByRole(role) {if (role 1 || role 2) {// do sth} else if (role 3 || role 4) {// do sth} else if (role 5) {// do sth} else {// do sth} }上面的代码存在的问题: 可读性差:很难记住数字的含义可维护性差&…

前端笔记:React的form表单全部置空或者某个操作框置空的做法

原创/朱季谦 在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。 我以前在工作就遇到过这类问题,正好顺便对表单置空…

Linux RN6752 驱动编写

一、概述 关于 RN6752V1 这个芯片这里就不做介绍了,看到这篇笔记的小伙伴应该都明白,虽然说 RN6752V1 芯片是 AHD 信号的解码芯片,但是也可以把芯片当做是一个 YUV 信号的 MIPI 摄像头,所以驱动的编写和 MIPI 摄像头无太大的区别。…

Docker篇之docker部署harbor仓库

一、首先需要安装docker step1:安装docker #1、安装yun源 yum install -y yum-utils #2、配置yum源 yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo # 如果上面源不稳定的话,更换为下列的aliyun源 yu…

爬虫学习 逆向爬虫(六)

多任务异步协程 协程:更高效的利用CPU import timedef func():print("黎明")time.sleep(3)print("还是黎明")func() 等待时机长 sleep时CPU不再工作 IO操作(费时不费力)->阻塞 线程运行阻塞后 移出主线程 移动到下一个 4个任务一个线程 …

首次部署Linux系统的经历

我是一名电子信息工程专业的学生,有次在图书馆上自习的时候无意间看到其他同学的电脑屏幕,黑色的屏幕上显示着一行一行的代码,勾起了我无限的好奇,经过询问得知他是用的Linux操作系统,是和Windows完全不同的系统&#…

Python解释器和环境变量配置(超详细)

一、 python解释器下载 1.百度python官网并打开 官网网址:www.python.org/ 在这里插入图片描述 2.选择DownLoads,Windows并打开 3.在下图页面选择你需要的版本下载即可(本文以python 3.10.4版本演示) 在这里插入图片描述 二、安…

基于OpenCV的手势识别系统设计与开发

摘要 随着计算机技术与信息处理技术迅速发展,智能化电子设备逐渐进入到日常的生产和生活中,与此同时,人们对电子设备操作过程的便捷化也提出了新的要求,这也促使计算机进行图像处理的技术也得到了发展。近些年兴起的模式识别技术…

蓝桥杯每日一题2023.11.29

题目描述 #include <stdio.h> #include <string.h>void StringInGrid(int width, int height, const char* s) {int i,k;char buf[1000];strcpy(buf, s);if(strlen(s)>width-2) buf[width-2]0;printf("");for(i0;i<width-2;i) printf("-"…

unity UI特效遮罩

using System.Collections; using System.Collections.Generic; using UnityEngine;/**UI特效遮罩 1.需要将ScrollRect 的遮罩Mask 换为 2D Mask2.将特效的Render里面的 Masking 设置为*/ public class UIParticleMaskControll : MonoBehaviour {// Start is called before …

《HelloGitHub》第 92 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 https://github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 …

手敲myarraylist,深入了解其运行逻辑

1、自定义MyArrayList类 该类里面基本有两个属性&#xff0c;一个是用来存放数据的数组&#xff0c;另外一个是用来描述已经存放数据的数量。同时设置arraylist表的默认长度为10&#xff1b;代码如下&#xff1a; public class MyArrayList {private int[] elem;private int u…

基于matlab的图像去噪算法设计与实现

摘 要 随着我们生活水平的提高&#xff0c;科技产品飞速更新换代&#xff0c;在信息传输中&#xff0c;图像传输所占的比重越来越大。但自然噪声会在图像传输时干扰其传输过程&#xff0c;甚至会使图片不能表达其原来的意义。去噪处理就是为了去除图像中的噪声&#xff0c;从而…

出口贸易媒体发稿7种方法提升转化率的秘密武器解析-华媒舍

出口贸易成为了许多企业发展的重要方向。在这个竞争激烈的市场中&#xff0c;如何让自己的产品脱颖而出&#xff0c;吸引更多客户并提高转化率&#xff0c;成为了每个企业家都面临的挑战。本文将向大家介绍7种提升转化率的秘密武器&#xff1a;出口贸易媒体发稿方法。 1. 出口贸…

如何获取1688的订单详情

获取1688订单详情需要申请 第一步&#xff1a;先去1688-开放平台申请&#xff0c;申请不一定能通过&#xff0c;审批很严。 第二步&#xff1a;首次登录请先注册&#xff0c;注册成功后即可登录。 第三步&#xff1a;选择&#xff1a;我是第三方开发者 第三方是封装好的ap…

如何判断数据库慢 SQL 查询?

慢 SQL 查询通常指执行时间较长或者消耗大量系统资源的查询。要判断一个 SQL 查询是否慢&#xff0c;可以考虑以下几个方面&#xff1a; 执行时间&#xff1a; 观察查询执行所需的时间。如果一个查询花费了相对较长的时间才能返回结果&#xff0c;可能就是慢查询的一个指标。通…

JavaScript黑科技:简洁有用的一行代码,让你的开发效率飙升!

说在前面 在这篇技术博客中&#xff0c;我们将向你介绍一些令人惊叹的JavaScript黑科技&#xff0c;这些只需一行代码就能实现的简洁而有用的功能&#xff0c;将极大地提升你的开发效率。无论是优化代码、增加交互性&#xff0c;还是实现复杂的逻辑&#xff0c;这些代码片段将成…