详解前端项目在阿里云服务器上的部署过程

项目上线需要部署到阿里云服务器上,由于刚刚申请的阿里云服务器没有项目环境,因此需要进行环境配置和项目部署。在这个过程中也踩到了几个坑,因此记下来供大家参考。

创建用户

参考链接:Ubuntu16.04系统中创建新用户

  1. 切换为root用户以获取创建用户的权限

    $ sudo su
    
  2. 添加新用户(在本文中用户名为hellocrease)

    $ adduser hellocrease
    

    根据系统提示输入密码和个人信息即可。

  3. 查看用户属性

    $ cat /etc/passwd
    


    如图,出现hellocrease这一行即代表创建成功。

  4. 允许该用户以管理员身份执行指令
    刚刚创建的用户是无法使用sudo命令的,因此我们需要为其添加相关的权限。
    1) 切换到root用户

    $  su root
    

    如果这里提示“su: Authentication failure”,是因为没有给root设置登录密码,解决方法:
    1.先切换回用户peng: su peng
    2.在给root设置登录密码:sudo passwd root

    2)修改sudoers文件

    $ visudo
    

    在“root ALL=(ALL:ALL) ALL”这一行下面加入一行:

    hellocrease ALL=(ALL:ALL) ALL
    

    修改后的文件如图:
    在这里插入图片描述
    ctrl+o(然后再按enter)保存,ctrl+c取消,ctrl+x退出
    3)切换为hellocrease用户

    $ su hellocrease
    

    4)验证修改结果

    $ sudo su
    

    在这里插入图片描述
    出现上图即代表命令执行成功。

安装Nodejs和npm

参考ubuntu 16.04安装node和npm的方法详解(npm官网推荐),在这里我们使用NVM方式安装。

  1. 安装NVM
    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
    $ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    $ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
    
  2. 检验安装效果
    $ command -v nvm
    
    在这里插入图片描述
    出现上图所示结果即代表nvm安装成功。
  3. 安装node
    $ nvm install 10.16.3
    
    在这里插入图片描述
    出现上图所示结果即代表node和npm安装成功。

部署项目

  1. 从github将项目代码拉下来

    $ git clone <Your url>
    
  2. 此时如果直接进行npm install,会出现如下错误:
    在这里插入图片描述
    这是因为我们对文件的权限不够,无法直接写入文件。
    我们可以使用管理员权限

    $ sudo npm install
    

    也可以获得文件的权限后再安装

    $ sudo chown -R $USER:$(id -gn $USER) /home/hellocrease/laser
    $ npm install
    
  3. 由于我们的项目使用了Angular框架,因此需要安装Angular CLI

    $ npm install -g @angular/cli
    
  4. 编译生成

    $ ng build --prod    # prod表示采用产品模式进行编译
    
  5. 使用pm2托管项目
    参考PM2托管工具使用详解
    服务器上的项目需要保持稳定,即使发生故障项目也要自动重启以提供服务,这时需要托管工具对我们的项目进行托管。PM2正是这样一款工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。

    $ npm install -g pm2
    $ pm2 start app.js
    

    在这里插入图片描述
    此时项目正常提供服务,我们的项目在服务器上部署完毕。

其他问题

  • 如果项目部署好但在浏览器中无法访问,有可能是阿里云服务器的端口没有开放,需要联系服务提供商申请开放端口
发布了11 篇原创文章 · 获赞 5 · 访问量 3333

猜你喜欢

转载自blog.csdn.net/Liut2016/article/details/100167660