网站部署:使用Nginx部署vue项目到阿里云服务器

news2024/11/25 12:57:35

最近租了个阿里云的服务器,想使用Nginx把刚做好的网站部署上去

下载Nginx

目前yum已经有了Nginx的源,因此可以直接用yum下载和安装

yum -y install nginx

默认的安装位置为/etc/nginx
默认的项目位置为/usr/share/nginx
如果安装失败检查是否安装了zlib prce openssl 以及 gcc
查看是否安装:

rpm -qa | grep openssl

安装

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

将Vue项目打包好上传到服务器

先在本地打包好生成dist文件夹

npm run build

将dist文件夹上传到:/usr/share/nginx/html/

配置Nginx

打开/etc/nginx/nginx.conf文件,按照如下备注的地方修改

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server { #主要修改server
        listen       9000;  #你想设置的端口号
        server_name  1.1.1.1; #你的服务器的public地址
        root         /usr/share/nginx/html; #所有项目的根目录,不写也没事

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / { #项目地址
            root   /usr/share/nginx/html/dist/; #项目的根目录
            index  index.html index.htm; #默认访问index时的页面
            try_files $uri /index.html; #
        }
        location /api/ {# 设置跨域反向代理
            rewrite ^.+apis/?(.*)$ /$1 break;  # 重写请求
            proxy_pass http://1.1.1.1:5000;  # 后端服务器地址
        }
         #如果需要配置代理,可以加以下代码
         location /business {
             proxy_pass  http://business.app.com;
        }
         location /user {
              proxy_pass  http://user.app.com;
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}


以上就配置好了Nginx。
接下来启动Nginx,如果之前已经启动了那就重启:这里给一些Nginx的常用命令

start nginx        #启动 Nginx
nginx -s reopen #重启Nginx
nginx -s reload #重新加载Nginx配置文件,然后以优雅的方式重启Nginx
nginx -s stop #强制停止Nginx服务
nginx -s quit #优雅地停止Nginx服务(即处理完所有请求后再停止服务)
nginx -V #显示版本和配置选项信息,然后退出
tasklist /fi "imagename eq nginx.exe"     # 查看windows任务管理器下Nginx的进程命令

#或者:
./nginx #启动
./nginx -s stop #关闭
./nginx -s reload #重启
systemctl restart nginx #重启
#启动Nginx并设置开机自动运行
sudo systemctl start nginx.service
sudo systemctl enable nginx.service

防火墙开放端口

firewall-cmd --zone=public --add-port=9000/tcp --permanent

开启之后需要重启防火墙

firewall-cmd --reload

查看是否已开:

firewall-cmd --list-ports

阿里云加入安全组

只有加入安全组之后外网才能访问这个安全组内的所有端口
实例->安全组->配置规则->手动添加(tcp, 端口号(a到b范围),源0.0.0.0)
在这里插入图片描述
加入好安全组之后不需要任何重启就能使用你的项目地址访问到了!

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

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

相关文章

渗透测试-CTF文件类型操作

识别文件类型 文件分离 文件合并 识别文件类型 当文件没有后缀名或者有后缀名无法正常打开时,根据识别的文件类型来修改后缀名即可正常打开文件。 使用场景:不知道后缀名,无法打开文件。 第一种方式:kali中使用 file 文件名 f…

173:vue+openlayers:解决国内openstreetmap地图加载不出来的问题(代码示例)

第173个 点击查看专栏目录 近来写程序,发现openlayers用OSM方式来加载OpenStreetMap地图,一片爆红,瓦片加载不出来。 本示例的目的是介绍演示如何在vue+openlayers中解决OpenStreetMap地图在国内被DNS污染,加载不出来瓦片的问题,通常我们是直接引用OSM,这里采用的是XYZ方…

2022年11月第十四届蓝桥杯校模拟赛详解+代码(一)

“须知少时凌云志,自许人间第一流” 鄙人11月八号有幸参加学校蓝桥杯校选拔赛,题型为5道填空题,5道编程题,总时间为小时。奈何能力有限,只完成了5道填空和3道编程大题,现进行自省自纠,分享学习&…

国产ETL工具 BeeDI 产品“实时同步“之 高阶 功能组件

BeeDI 提供“ 实时”企业数据集成。实时组件通过实时处理和传输业务数据的能力,增强了BeeDI的批处理功能。为满足当下复杂的业务需求,IT部门需要实时集成以加快核心业务流程和信息流。使用实时功能,IT部门可以使用统一界面,从BeeD…

【Mybatis】mybatis使用与理解

1. mybatis基础环境搭建 若想使用mybatis,需要有如下两个jar包:①mybatis的核心jar包。②数据库驱动包。 (想使用别人提供的服务就必须要有别人的jar包;mybatis是和数据库打交道的,那么你的程序中,数据库的…

【MySQL高级】MySQL的锁机制

目录 概述 MyISAM 表锁 InnoDB行锁 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制(避免争抢)。 在数据库中,除传统的 计算资源(如 CPU、RAM、I/O 等)的争用以外,数据也是一种供许多用户共…

重装系统后要安装哪些驱动

​重装win10后需要安装驱动吗?win10系统比win7系统高级的地方在于系统内置了很多驱动,这可以省去用户很多安装时间,下面小编来告诉大家重装系统后要安装的驱动有哪些。 工具/原料: 系统版本:windows10系统 品牌型号&#xff1…

mysql8其它新特性

文章目录MySQL8.0新特性新特性1:窗口函数序号函数ROW_NUMBER()函数RANK()函数DENSE_RANK()函数分布函数PERCENT_RANK()CUME_DIST()函数前后函数LAG(expr,n)函数LEAD(expr,n)函数首尾函数FIRST_VALUE(expr)函数LAST_VALUE(expr)函数其它函数NTH_VALUE(expr,n)函数NTI…

Docker 常用命令大全

个人理解 docker中的镜像 就像是咱们java 中的Class ,而容器呢 是基于这个镜像构建出的实例 类似于咱java 中 根据Class构造出的一个个实例对象 ,本人是初学者 理解有误还请见谅,并麻烦您说说您的看法让彼此相互学习… 按我理解 简言之 doc…

Java-日期类,正则实验

1. 随机产生两个日期时间,输入按时间先后顺序输出 public class RandomDate {SuppressWarnings("deprecation")public static void main(String[] args) throws ParseException {SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss&…

二分查找 【模板+中间值问题】

全文目录😃前言😕二分查找动图演示😴代码模板❗️ 使用哪个模板问题 ❗️💢 mid为何1问题 💢😃前言 二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法。…

[解决]github上传大文件卡住

0x00 需求 github目前的策略是超过50M的文件不允许上传,推荐使用lfs。 0x01 操作 再把之前提交的commit 回滚: git reset --hard commitId 在配置lfs: git lfs install git lfs track "*.zip" git lfs track "*.jar" git…

【K8S】亲和、反亲和、污点、容忍

文章目录【K8S】亲和、反亲和、污点、容忍K8s调度亲和与反亲和Pod和Node硬亲和和软亲和requiredDuringSchedulingIgnoredDuringExecution:硬策略preferredDuringSchedulingIgnoredDuringExecution:软策略污点与容忍污点(Taint)污点…

Python学习----基础语法2

布尔类型 布尔本质上是 1 和 0 if 基本语法格式 语法还是比较简单的 , 需要注意的是 , Python是通过空格缩进来判断代码块归属的 ( 不像java这么通过 花括号进行区分 ) , 默认是四个空格 , 你也可以使用两个或者三个等 , 只要全部统一即可 , 但是编辑器会有提示 , 规范是四…

一文带你快速了解ptrdiff_t

简介 ptrdiff_t是C/C标准库中定义的一个与机器相关的数据类型。ptrdiff_t类型变量通常用来保存两个指针减法操作的结果。 ptrdiff_t定义在stddef.h(cstddef)这个文件内。 ptrdiff_t通常被定义为long int类型。 ptrdiff_t定义在C99标准中。 标准库类…

【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出

文章目录目标代码0.页面结构1.新增按钮和弹出表单:结构2.新增按钮和弹出表单:点击新增弹出表单3.表单样式4.表单验证5.表单的提交和取消功能:接口、mock相关准备6.表单的提交和取消功能提供的数据和接口1-operateFormLabel.js5-user.js效果总…

小程序转App最便捷的方法,附实操

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。 它也是构建未来的Google Fuchsia应…

计算机网络(一)网络体系结构

layout: post title: 计算机网络(一)网络体系结构 description: 计算机网络(一)网络体系结构 tag: 计算机网络 计算机网络计算机网络体系基本概念网络性能指标数据量与数据速率(比特率)带宽吞吐量时延时延带…

Python入门自学进阶-Web框架——25、DjangoAdmin项目应用-分页与过滤

对于数据很多,就需要将数据进行分页显示,同时还要提供过滤功能。 当配置文件中配置了过滤条件,那就要在显示表信息的时候,显示过滤条件选择项,选择后进行过滤,然后下面显示过滤后的数据,如果数…

数据结构(单链表)

前沿: 在前面总结的顺序表的时候,最后也说出了他的一些缺点,例如头插/中间插的时候的时间复杂度是O(n),这个效率并不高,而如何提高效率的实现呢,这里我们可以通过单链表来简单的提高这个效率。 思维导图&am…