从零开始部署前端项目到阿里云windows服务器

本文详细介绍了如何在阿里云服务器上购买并连接Windows实例,然后下载并安装Nginx,配置监听端口和服务器名称,以及通过安全组设置对外开放的端口。此外,还讲解了如何验证Nginx的安装与启动,以及使用相关命令进行管理。最后,提到了在防火墙层面开放端口的步骤,确保远程访问的畅通。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、进入阿里云官网购买服务器

https://ecs.console.aliyun.com/#/home
在这里插入图片描述
购买好服务器后在左边实例中可以看到我们购买的服务器。

2、打开cmd连接实例上的公网ip

在这里插入图片描述
在这里插入图片描述
进入购买的服务器的windows操作系统。
在这里插入图片描述

3、安装nginx

http://nginx.org/en/download.html
在这里插入图片描述
安装windows稳定版

4、下载下来后直接解压

在这里插入图片描述
打开文件nginx-1.20.2
在这里插入图片描述
在此路径下打开cmd。输入启动Nginx命令:

start nginx

如果窗口闪一下,并打开浏览器,输入 http://localhost:80 显示下方页面则表示安装成功。
在这里插入图片描述
也可以在cmd命令窗口输入命令 tasklist /fi “imagename eq nginx.exe” ,出现如下结果说明启动成功
在这里插入图片描述

5、修改nginx配置

在这里插入图片描述
在此路径下对nginx.conf通过记事本打开。
在这里插入图片描述

监听端口listen改为开放的端口(往下拉),
server_name改为公网ip
location为nginx安装目录下的html文件下默认打开index.html文件。

编辑修改完成后在cmd中输入 配置文件修改重装载命令:

nginx -s reload

常用nginx命令如下:

验证配置是否正确: nginx -t

查看Nginx的版本号:nginx -V

启动Nginx:start nginx

快速停止或关闭Nginx:nginx -s stop

正常停止或关闭Nginx:nginx -s quit

配置文件修改重装载命令:nginx -s reload

6、配置安全组

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
添加一个自己开放的端口,我这里是8081

7、添加成功后,即可在任意地址打开部署的ip地址

![在这里插入图片描述](https://img-blog.csdnimg.cn/3887e2567d634d73974a712804bd414f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JuL6JuL55qE6ICB5YWs,size_20,color_FFFFFF,t_70,g_se,x_16

其他

防火墙开放端口号

打开控制面板中的系统和安全
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击完成即可。

### 若依框架部署阿里云服务器教程 #### 创建数据库并初始化数据 在开始之前,需要先准备好数据库环境。登录阿里云RDS控制台或者本地MySQL客户端连接至目标数据库实例,创建一个新的数据库用于存储若依系统的数据[^3]。 接着,在该新建立的数据库中运行官方提供的SQL脚本文件来完成表结构以及初始数据的导入工作。这一步非常重要,因为它定义了整个应用的数据模型基础。 #### 后端服务部署流程 对于后端部分,可以选择传统的手动方式或者是利用容器化技术简化操作过程: ##### 手动部署方法 1. 下载最新版本的若依源码包,并解压得到完整的项目目录。 2. 修改`application.yml`中的数据库配置项以匹配前面设置好的DB参数。 3. 使用Maven工具构建JAR包(`mvn clean package`)。 4. 将打包后的可执行jar上传至Linux服务器指定路径下并通过命令启动它: ```bash nohup java -jar ruoyi-admin.jar & ``` ##### Docker镜像自动化方案 考虑到实际生产环境中可能涉及更多复杂的依赖关系管理问题,推荐采用基于Dockerfile的方式实现一键式快速部署效果更好一些[^2]: - 准备好包含必要组件(如Java JDK等)的基础映像描述文档; - 构建自定义image并将生成的结果push到远程仓库供后续pull调用; - 最终只需简单几条指令即可轻松搞定全部准备工作! #### 前端静态资源发布指南 针对前端界面展示层面上的内容,则主要集中在Vue.js单页面应用程序(SPA)方面的工作量较大一点而已: 同样也需要经历类似的克隆代码库->调整环境变量设定值->编译产出最终产物这三个阶段之后再借助nginx反向代理机制对外提供访问入口链接地址就可以了: 具体步骤如下所示: 1. 安装Node.js及相关开发插件; 2. Clone下来对应的git repository ; 3. 进入工程根目录执行npm install加载所需模块列表; 4. 设置VUE_APP_BASE_API指向后台API接口所在的域名位置信息; 5. Run `npm run build`,等待完成后会生成dist文件夹即为我们所需要的成品资料集合体; 6. Copy上述成果集放置于Web Server相应的位置处比如/var/www/html/; 7. Config Nginx server block rules accordingly. 通过以上几个方面的详细介绍应该可以帮助您顺利完成从零起步直至成功上线整套解决方案的过程啦!如果有任何疑问欢迎随时提问交流哦~ ```python print("Deployment Completed!") ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蛋蛋的老公

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值