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

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

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

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,刚才部署的项目可以访问了。

相关推荐
水冗水孚11 小时前
图文并茂讲解nginx中http升级https(部署SSL证书)知识点总结
nginx·http·https
HYI1 天前
小公司前端多分支测试太痛苦?我自己写了个轻量 CLI
nginx·vite
timeweaver1 天前
深度解析 Nginx 前端 location 配置与优先级:你真的用对了吗?
前端·nginx·前端工程化
Moment1 天前
nginx 如何配置防止慢速攻击 🤔🤔🤔
前端·后端·nginx
伊成2 天前
Docker 部署 Nginx 完整指南
nginx·docker·容器
小白的代码日记2 天前
Nginx学习与安装
运维·nginx
ayaya_mana3 天前
Nginx性能优化与安全配置:打造高性能Web服务器
运维·nginx·安全·性能优化
油丶酸萝卜别吃3 天前
nginx配置代理服务器
运维·网络·nginx
花酒锄作田3 天前
Nginx反向代理Kafka集群
nginx·kafka
奥格列的魔法拖鞋~3 天前
Docker-LNMP架构 创建多项目- 单个ngixn代理多个PHP容器服务
nginx·docker·eureka·架构·php·lnmp