前端必学:💻Mac + Nginx 部署 Vue3 静态项目

基础版

前言

最近空闲时间比较多,想着提升提升自己,想到了关于部署方面的东西自己还完全不懂,于是决定学习下部署相关的知识,经过几天的摸索,入门了nginx部署前端静态文件部署,还入门了通过Vercel + Railway部署前后端项目线上地址,代码是通过react19 + express + mysql2实现的,这篇先记录一下nginx静态部署。

安装

第一步是要安装 Nginx,我是Mac环境,通常使用 Homebrew 安装这些工具,没有Homebrew可以到官网先安装,然后执行nginx安装命令。

bash 复制代码
brew install nginx

安装之后,查看安装路径,默认路径如下

bash 复制代码
/usr/local/etc/nginx/nginx.conf

可以打开Finder确认,按Shift+command+g输入/usr查找nginx.conf

处理dist文件

把dist文件放在/usr/local/var/www下边,在www下新建一个文件夹,起一个你喜欢的名字,例如我起了一个app3,然后把 dist 里边的文件都放到app3下边。

修改nginx.conf

接下来进入关键部分nginx配置的修改,nginx.conf 可以通过文稿打开修改,也可以在终端执行nano /usr/local/etc/nginx/nginx.conf命令打开修改,修改server部分内容,# 注释的部分不用写,仅仅是为了解释单行配置的作用。

conf 复制代码
server {
     # 监听的端口
     listen       8080;
     # 域名
     server_name  localhost;

     location / {
        # 拼接路径
        root   /usr/local/var/www/app3;
        # 默认返回的文件
        index   index.html;
        # 匹配所有.js或.mjs文件,添加请求头
        location ~ \.(js|mjs)$ {
            add_header 'Content-Type' 'application/javascript';
        }
     }
}

执行

在终端输入并回车执行nginx,启动 nginx,然后访问 http://localhost:8080 ,就能看到你的静态项目成功部署了

bash 复制代码
nginx

进阶版

上文是一个基础版 nginx 配置,实际上我们当然不是只有一个项目需要部署,下边聊一下遇到多个项目部署,或者项目配置了publicPath(Vue CLI)或 base (Vite)的情况下,如何修改 nginx.conf 配置.

创建目录存放多站点配置

首先创建俩文件夹,一个用来放所有的.conf配置文件,另一个用来存放当前启用的站点。

bash 复制代码
mkdir -p /usr/local/etc/nginx/sites-available
mkdir -p /usr/local/etc/nginx/sites-enabled
  • sites-available:所有的配置
  • sites-enabled:启用的配置

修改主配置文件

引入sites-enabled

js 复制代码
#user  nobody;
worker_processes  1;

error_log  /usr/local/var/log/nginx/error.log;
pid        /usr/local/var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    access_log  /usr/local/var/log/nginx/access.log;

    sendfile        on;
    keepalive_timeout  65;

    gzip  on;
    # Nginx 启动时会自动加载 `sites-enabled` 中的所有配置文件。
    include /usr/local/etc/nginx/sites-enabled/*;
}

添加第一个配置文件

在 sites-available 下新建一个 vue-app1.conf 文件

base 复制代码
server {
     listen       8080;
     server_name  vue-app1.local;

     location / {
        root    /usr/local/var/www/app1;
        index   index.html;

        location ~ \.(js|mjs)$ {
            add_header 'Content-Type' 'application/javascript';
        }
     }
}

启用站点

base 复制代码
ln -sf ../sites-available/vue-app1.conf /usr/local/etc/nginx/sites-enabled/

处理dist

把dist文件放在/usr/local/var/www下边的app1目录

修改hosts文件

为了让vue-app1.local可以访问,需要增加域名映射

bash 复制代码
sudo nano /etc/hosts

# 添加
127.0.0.1 vue-app1.local

保存之后执行以下两条命令

bash 复制代码
# 刷新DNS缓存
sudo killall -HUP mDNSResponder
bash 复制代码
#重启nginx

sudo killall -HUP mDNSResponder

访问

vue-app1.local:8080

添加第二个配置文件

在 sites-available 下新建一个 vue-app2.conf 文件,例如这个文件需要部署的前端项目存在基本 URL,并且 router 类型是 createWebHistory ,例如本地启动时,地址是 http://localhost:8080/czsc/ ,这个czsc就是基本 URL,这时候的 vue-app2.conf 文件就需要如下配置

js 复制代码
server {
     listen       8080;
     server_name  vue-app2.local;

     location /czsc/ {
        # 别名,替换匹配的路径部分
        alias   /usr/local/var/www/app2/;
        index   index.html;
        # 支持 Vue Router 的 `history` 模式
        try_files $uri $uri/ /czsc/index.html;

        location ~ \.(js|mjs)$ {
            add_header 'Content-Type' 'application/javascript';
        }
     }
}

之后的步骤就和第一个配置文件一样了,尝试一下吧

访问

vue-app2.local:8080/czsc

相关推荐
CSR-kkk15 分钟前
前端工程化速通——①ES6
前端·es6·速通
Bruce_Liuxiaowei17 分钟前
Netstat高级分析工具:Windows与Linux双系统兼容的精准筛查利器
linux·运维·网络·windows·安全
yt9483220 分钟前
C#实现CAN通讯接口
java·linux·前端
前端小巷子21 分钟前
Cookie与Session:Web开发中的身份验证与数据存储
前端·javascript·面试
小磊哥er32 分钟前
【前端工程化】前端开发中如何做一套规范的项目模版
前端
Wetoria43 分钟前
管理 git 分支时,用 merge 还是 rebase?
前端·git
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生融合新领域:智慧环保的污染源监测与治理
前端·ui
一只小风华~1 小时前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
易德研发1 小时前
ubuntu24.04安装NFS网络文件系统/ARM开发板NFS挂载
运维·服务器·网络
生活爱好者!2 小时前
NAS 部署白板工具,实现思维导图/画板/流程图自由
运维·docker·容器