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

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

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

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

相关推荐
运维小白。。16 分钟前
Nginx 反向代理
运维·服务器·nginx·http
卑微的码蚁4 小时前
ngxin
nginx
BLEACH-heiqiyihu9 小时前
红帽9中nginx-源码编译php
运维·nginx·php
这个需求建议不做11 小时前
vue3打包配置 vite、router、nginx配置
前端·nginx·vue
&星辰入梦来&11 小时前
Nginx从入门到入土(三): 静态资源管理与代理服务
运维·nginx·负载均衡
苹果醋312 小时前
SpringCloud系列之一---搭建高可用的Eureka注册中心
运维·nginx
丶213616 小时前
【Nginx】在 Docker 上安装 Nginx 的详细指南
运维·nginx·docker
ZHOU西口1 天前
微服务实战系列之玩转Docker(十五)
nginx·docker·微服务·云原生·swarm·docker swarm·dockerui
苹果醋31 天前
react 路由 react-router/react-router-dom
运维·nginx
ps酷教程2 天前
nginx进阶篇(二)
nginx