前端必学:💻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

相关推荐
BAOYUCompany3 小时前
暴雨服务器更懂人工智能+
运维·服务器·人工智能
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian3 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0013 小时前
实现视频实时马赛克
linux·前端·javascript
SpiderPex3 小时前
GitHub下载项目完整配置SSH步骤详解
运维·ssh·github
烛阴4 小时前
Smoothstep
前端·webgl
若梦plus4 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员4 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉4 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
睡觉的时候不会困4 小时前
基于三台主机搭建 Web 服务环境:Nginx、NFS 与 DNS 配置全流程
运维·nginx