如何使用阿里云搭建一个前端静态工程

你没看错,只有一个静态工程,不需要微服务,因为我还不会。

申请了一个阿里云的免费试用机会,开始学习搭建一个前端静态工程

1. 步骤一:登录控制台创建实例

申请完以后需要登录阿里云控制台->ESC服务器->创建实例

2. 步骤二:远程链接重置远程密码

实例的左上角远程登录按钮,初次登录需要重置一个密码; 重置密码以后,可以通过MobaXte等软件远程链接云服务器; 使用mobaXte通常默认22端口,地址即实例的公网IP,账户默认root。

3.步骤三:安装需要的资源Nginx等

运行一下命令安装Nginx的依赖

yum 复制代码
yum install -y gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

运行wget命令下载Nginx;注意下载nginx官网发布的版本, 我的云服务器是Linux系统,下载的是nginx-1.22.1.tar.gz版本。

wget 复制代码
wget https://nginx.org/download/nginx-1.22.1.tar.gz

使用一下命令解压并安装nginx(如果解压报错,确认安装包名称没有错,或者去官网确认下载的版本是已发布的,或者看看下载的安装包大小是否合理,确保包是完整的)

bash 复制代码
tar zxvf nginx-1.22.1.tar.gz
cd nginx-1.22.1
./configure && make && make install

启动nginx: 输入 whereis nginx,显示 nginx: /usr/local/nginx

使用命令 usr/local/nginx/sbin/nginx启动ng。如果按下回车键只是重新加载一行说明启动成功了,也可以用命令ps -ef | grep nginx 查看运行的ng。如下表示已经运行了。当然更简单的方法是在浏览器输入云服务的公网IP。

4.步骤四:部署前端工程

找到如下目录:/usr/local/nginx/conf/

双击打开nginx.conf 文件,如下:前端工程路径自己定义的,通常放在opt目录下面;这里默认监听的80端口,前端工程解压到这里以后,切记保存ng的配置,然后一定要重启ng ;重启命令如下/usr/local/nginx/sbin/nginx -s reload

ini 复制代码
listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /opt/static/html-marvel; ##前端工程路径
            index  index.html index.htm;
        }

部署完以后还有一步很重要;在阿里云控制台->安全组增加80和443端口,否则可能无法访问。

然后在浏览器输入我们的公网IP,刚才部署的项目可以访问了。

相关推荐
JoySSLLian1 小时前
手把手教你安装免费SSL证书(附宝塔/Nginx/Apache配置教程)
网络·人工智能·网络协议·tcp/ip·nginx·apache·ssl
一分半心动3 小时前
宝塔面板lnmp架构,tp6框架网站伪静态
nginx·php
全栈工程师修炼指南6 小时前
Nginx | stream 四层反向代理:SSL、PREREAD 阶段模块指令浅析与实践
运维·网络·网络协议·nginx·ssl
脏脏a10 小时前
告别物理出勤:Nginx 搭配 cpolar 实现远程开发无缝协作
运维·nginx
Dxy123931021619 小时前
413 Request Entity Too Large 原因与解决方案
nginx
CYpdpjRnUE20 小时前
光储一体机仿真模型搭建之旅
nginx
Volunteer Technology1 天前
FastDFS+Nginx
运维·nginx
qinyia1 天前
**使用AI助手在智慧运维中快速定位并修复服务异常:以Nginx配置错误导致502错误为例**
linux·运维·服务器·数据库·mysql·nginx·自动化
404Clukay1 天前
Windows Server 配置 Let‘s Encrypt 免费 HTTPS 证书(WACS + Nginx 自动化方案)
windows·nginx·https
一叶星殇1 天前
.NET6 解决 Nginx 反向代理后获取客户端真实 IP(始终显示网关 IP)问题
运维·服务器·nginx