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

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

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

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

相关推荐
苹果醋310 小时前
Java8->Java19的初步探索
java·运维·spring boot·mysql·nginx
雨雪飘零11 小时前
Windows系统使用OpenSSL生成自签名证书
nginx·证书·openssl
yanwushu12 小时前
Xserver v1.4.2发布,支持自动重载 nginx 配置
mysql·nginx·php·个人开发·composer
ajsbxi1 天前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
JustCouvrir2 天前
macOS|前端工程部署到Nginx服务器
服务器·前端·nginx
AlbertS2 天前
使用 Let’s Encrypt 获取免费SSL证书
nginx·免费·centos7·ssl证书·let’s encrypt
航月2 天前
FTP、ISCSI、CHRONY、DNS、NFS、DOCKER、MARIADB、NGINX、PHP、CA各服务开启方法
nginx·docker·mariadb
IT-民工211102 天前
nginx监控指标有哪些
运维·nginx
陌路物是人非2 天前
docker对nginx.conf进行修改后页面无变化或页面报错
nginx·docker
草明3 天前
Nginx 做反向代理,一个服务优先被使用,当无法提供服务时才使用其他的备用服务
运维·nginx·github