阿里云部署前端项目nginx配置

1.链接服务器.

   1.1Xshell链接阿里云服务器

2.阿里云配置nginx

   2.1  mkdir /usr/local/nginx   (创建文件夹)

   2.2  然后进入文件夹 cd nginx   然后下载  wget http://nginx.org/download/nginx-1.22.0.tar.gz  (下载nginx)

   2.3  tar -zxvf nginx-1.22.0.tar.gz   (解压nginx)

   2.4  打开nginx.conf文件 vim nginx.conf (如果不太会用linxu,可以用FTP直接找到文件用记事本的方式打开)

           如果找不到nginx.conf 可以用  ps -ef | grep nginx   或者 whereis nginx.conf

   2.5    修改nginx文件

          listen : 端口号

          server_name  :  服务器域名

          root:在阿里云上面存放build文件地址

2.6   阿里云配置安全组,把域名配置下,外网才能访问

2.7   启动nginx (cd到sbin文件里面,可以执行ll命令看看有没有nginx文件,然后执行./nginx,重启是./nginx -s reload)

2.8  然后打开 服务器:域名查看网页

### 如何在宝塔面板中正确配置 Nginx部署 Vue 前端项目 #### 一、准备工作 为了成功部署 Vue 前端项目,在开始之前需完成以下准备事项: - **购买服务器**:选择合适的云服务提供商(如阿里云),并创建一台虚拟机实例,推荐使用 CentOS 或 Ubuntu 操作系统[^3]。 - **安装宝塔面板**:通过官方文档或脚本快速安装宝塔面板。该工具提供了可视化的管理界面,极大简化了 Linux 系统上的运维工作[^2]。 #### 二、环境搭建 登录到宝塔面板后执行以下操作: 1. **安装必要组件** - 在左侧菜单栏找到“软件商店”,依次安装 `Nginx` 和其他可能需要用到的服务(例如 PHP)。尽管 Vue 是静态资源项目,但某些情况下仍需要配合动态语言处理特定请求。 2. **上传构建文件** - 使用 FTP 工具(比如 Xftp)连接至服务器,将本地打包好的 Vue 应用程序目录复制到 `/www/wwwroot/your-domain.com` 下面[^1]。注意这里的路径可以根据实际需求调整,默认根目录由站点设置决定。 #### 三、Nginx 配置详解 针对 Vue 单页面应用 (SPA),如果直接访问子路由会出现 404 错误,则需要修改默认的 Nginx 配置来支持 HTML5 History Mode: 1. 创建一个新的网站或者编辑现有站点; 2. 进入对应的域名配置选项卡下的伪静态规则部分; 3. 添加自定义规则如下所示: ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这段代码的作用在于当用户尝试加载不存在的具体 URL 地址时重定向回首页 index.html 文件从而让前端框架接管渲染逻辑[^4]。 #### 四、解决跨域问题 对于前后分离架构的应用场景来说,不可避免会碰到 CORS(Cross-Origin Resource Sharing) 的挑战。可以通过两种方式应对这一情况: ##### 方法A: 修改后端允许来源头信息 确保 API 接口所在的服务器响应头部包含了正确的 Access-Control-Allow-* 字段值给定客户端许可范围。 ##### 方法B: 设置反向代理 利用 Nginx 实现内部跳转而不暴露真实地址的方式规避浏览器的安全策略限制。具体做法是在刚才提到过的高级设置区域填写目标主机的信息以及可选的内容替换表达式。 --- ### 总结 综上所述,借助于宝塔面板的强大功能可以非常便捷高效地完成整个流程从初始化到最后上线的过程。只要遵循上述指导原则,并妥善处理好各个细节之处就能顺利实现预期效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值