前端项目部署-手动部署

前端代码部署

前端代码部署的方式有很多,本文主要介绍以下几种:手动部署,docker镜像部署,gitee + docker自动部署。

手动部署

1、在我们电脑本地新建文件test-demo\index.html

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello~我的第一个部署页面</div>
</body>
</html>

2、登录服务器,在服务器下新建目录www

bash 复制代码
# 登录进去时是在/root目录下,所以我们先切换到根目录
cd ./

# 新建目录www
mkdir www

3、使用Xftp等工具将test-demo文件夹上传到服务器的www目录下。

4、服务器nginx文件配置。

先来启动nginx

nginx

启动后查看下是否有nginx进程:

perl 复制代码
netstat -anput | grep nginx

可以看到下图: 启动完成后,获取nginx配置文件的地址:

nginx -t 

先来查看下默认的配置文件

bash 复制代码
cat /etc/nginx/nginx.conf

配置文件的含义如下:(删除了原有全部的注释)

ini 复制代码
# worker进程运行的用户和组
user root;

# 指定Nginx的工作进程数,根据硬件和负载情况设置。
worker_processes auto;

# 用来定义全局错误日志文件,通常放在var中,level有 debug,info,notice,warn,error,crit
error_log /var/log/nginx/error.log;

# 指定进程id的存储文件位置
pid /run/nginx.pid;

# 设置包含的其他配置文件,一些加载nginx动态模块相关配置文件
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;

    # 该指令必须在sendfile打开的状态下才会生效,主要是用来提升网络包的传输'效率',防止网络堵塞
    tcp_nopush          on;

    # 该指令必须在keep-alive连接开启的情况下才生效,来提高网络包传输的'实时性',也是为了防止网络堵塞
    tcp_nodelay         on;

    # 设置客户端连接活跃超时,也就是长连接超时时间,单位是秒
    keepalive_timeout   65;

    # 影响散列表的冲突率。值越大,就会消耗更多的内存,但散列key的冲突率会降低,检索速度就更快。值越小,消耗的内存就越小,但散列key的冲突率可能上升。默认1024
    types_hash_max_size 4096;

    # 设置文件的mime类型,mime.types是文件扩展名与文件类型映射表
    include             /etc/nginx/mime.types;

    # 默认响应类型,二进制流
    default_type        application/octet-stream;

    # 包含其它配置文件,分开规划解耦
    include /etc/nginx/conf.d/*.conf;

    # server用来指定虚拟主机,可以指定多个
    server {
        # 指定虚拟主机监听的端口,默认80,ipv4
        listen       80;

        # 指定虚拟主机监听的端口,默认80,ipv6
        listen       [::]:80;

        # 指定虚拟主机监听的域名,域名可以有多个,用空格隔开。
        # 当开始处理一个http请求时,nginx会取出header中的host,与nginx.conf中的每一个server的server_name进行对比
        # 然后根据server的匹配优先级排序(前提是浏览器访问端口与server listen端口一致),以此决定到底由哪一个server块来处理这个请求。
        server_name  _;

        # 指定这个虚拟主机的根目录
        root         /usr/share/nginx/html;

        # xxx
        include /etc/nginx/default.d/*.conf;

        # 错误页面路由,状态码为时,返回404.html
        error_page 404 /404.html;
        location = /404.html {
        }

        # 错误页面路由,状态码为以下几种时,返回50x.html
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
}

由上可知,我们想要访问\www\test-demo\index.html的话,就需要在nginx.conf加一个server块,内容如下:

ini 复制代码
server {
    #配置端口
    listen 8001; 
    listen [::]:8001;

    #修改为您的域名
    server_name x.xxx.xxx.xxx; 

    root /www/test-demo; 
    index index.html;

    location / {
        # 浏览器刷新的时候如果当前路径存在则访问当前路径,不存在则跳转到404
        try_files $uri $uri/ =404;
    }
}

配置完之后先来验证下我们的配置是否正确:

nginx -t

配置正确后需要重启下nginx

nginx -s reload

5、阿里云平台配置安全组开放端口

现在直接访问我们的页面是访问不了的,需要先去阿里云平台配置安全组开放8001端口。

6、访问

然后用我们电脑本地的浏览器打开链接http://x.xxx.xxx.xxx:8001/index.html,就可以成功的看到我们的页面了。

接下来我们来介绍前端项目部署-docker镜像部署

参考文章

1、使用nginx部署前端项目(超详细教程)

2、nginx配置详解

3、nginx.conf nginx配置文件常见配置解析

相关推荐
森叶3 分钟前
Electron 安装包 asar 解压定位问题实战
前端·javascript·electron
drebander6 分钟前
ubuntu 安装 chrome 及 版本匹配的 chromedriver
前端·chrome
honey ball9 分钟前
仪表放大器AD620
运维·单片机·嵌入式硬件·物联网·学习
秋已杰爱11 分钟前
进程间关系与进程守护
运维·服务器
软件技术NINI15 分钟前
html知识点框架
前端·html
深情废杨杨19 分钟前
前端vue-插值表达式和v-html的区别
前端·javascript·vue.js
GHUIJS19 分钟前
【vue3】vue3.3新特性真香
前端·javascript·vue.js
众生回避25 分钟前
鸿蒙ms参考
前端·javascript·vue.js
洛千陨26 分钟前
Vue + element-ui实现动态表单项以及动态校验规则
前端·vue.js
Flying_Fish_roe28 分钟前
linux-软件包管理-包管理工具(Debian 系)
linux·运维·debian